CSS - Responsive website vraagje

Flippi
Pro Member
Pro Member
Berichten: 294
Lid geworden op: 26 Jan 2011
Bedankt: 21 keer
Recent bedankt: 1 keer
Uitgedeelde bedankjes: 53 keer

CSS - Responsive website vraagje

Berichtdoor Flippi » 23 Mar 2017, 14:40

Hallo,

Het is de eerste maal dat ik mij bezig hou met een responsive website die draait op Wordpress en ik snap iets niet.
Voor de header-div gebruik ik een foto van 1260 x 240 pixels waaraan ik zelf de rode "div" heb toegevoegd. Die rode div staat absolute-gepositioneerd, 50 pixels van de bovenrand. Dit klopt zoals u ziet op de 1ste screenshot hieronder.

Code: Selecteer alles

#site-header {
   position: relative;
   z-index: 3;
   max-width: 100%;
   height: auto;
}

<div id="site-header">
<div style = "position: absolute; top: 50px; right: 50px; background: red;"><a href="#" target="_blank">Radio en TV via Satelliet</a></div>
<img src="../Satellietantenne.png" width="1260" height="240">
</div>

Afbeelding

Als ik de site nu bekijk op mijn Galaxy S7 met een resolutie van 1440 x 2560 pixels, dan krijg ik onderstaande schermlayout.
De title-header is aangepast aan de breedte van het smartphonescherm, maar die rode div staat nu plots op 200 pixels van de bovenrand. Ik had die eigenlijk ook op mijn smartphone op 50 pixels verwacht, want hij staat toch absoluut gepositioneerd?
Ik weet dat ik dit kan oplossen via "@media screen and (min-width: xxxpx) etcetera", maar ik wou toch begrijpen waar de fout in mijn redenering zit...

Afbeelding

xayana
Premium Member
Premium Member
Berichten: 535
Lid geworden op: 21 Dec 2009
Bedankt: 58 keer
Recent bedankt: 1 keer
Uitgedeelde bedankjes: 38 keer

Re: CSS - Responsive website vraagje

Berichtdoor xayana » 23 Mar 2017, 17:15

Een ander zal dit overschrijven. Je WP-thema zal een sh*tload aan CSS genereren en daarvan zal er eentje een media query bevatten die jouw inline CSS overschrijft. Check eens in de inspector (F12) van je browser welke CSS nog slaat op die div.

In Chrome kan je daarvoor de device toolbar gebruiken, of gewoon de inspector schalen.

butskristof
Elite Poster
Elite Poster
Berichten: 1053
Lid geworden op: 19 Dec 2011
Locatie: Heist-op-den-Berg
Bedankt: 58 keer
Uitgedeelde bedankjes: 464 keer
Contact:

Re: CSS - Responsive website vraagje

Berichtdoor butskristof » 23 Mar 2017, 17:32

Kan die 200px ook niet te maken hebben met upscaling van je schermresolutie? Voor de browser (en de media queries) heeft je scherm een resolutie van 720x1280, dewelke dan achteraf x2 (of x4 hier? in dat geval 360px breed) gedaan wordt. Anders zou je de responsive versie ook gewoon helemaal niet krijgen, maar de desktop versie bij 1440px breed.

Xayana's opmerking is zeker ook een om rekening mee te houden, maar voor zo ver ik hier kan zien blijft die absolute position gewoon gelden (in Safari).
 MacBook Pro 15" (2017) - 2,8 GHz quad core i7 - 16 GB RAM - macOS High Sierra (Server)
 MacBook Air 13" (Mid 2014) - 1,4 GHz Dual Core i5 - 4 GB RAM - macOS High Sierra
 iPhone 7 Plus 32 GB Black - iOS 11
 iPad Air 2 Wi-Fi 64 GB Gold - iOS 11
 Watch Series 3 42mm Space Gray

brubbel
Premium Member
Premium Member
Berichten: 635
Lid geworden op: 04 Jul 2012
Bedankt: 144 keer
Recent bedankt: 1 keer
Uitgedeelde bedankjes: 39 keer

Re: CSS - Responsive website vraagje

Berichtdoor brubbel » 23 Mar 2017, 19:06

Probeer er eens top: 50px !important; van te maken?

Flippi
Pro Member
Pro Member
Berichten: 294
Lid geworden op: 26 Jan 2011
Bedankt: 21 keer
Recent bedankt: 1 keer
Uitgedeelde bedankjes: 53 keer

Re: CSS - Responsive website vraagje

Berichtdoor Flippi » 23 Mar 2017, 22:03

Bedankt voor de tips. Ik heb ondertussen al wat screenshots verzameld van toestellen met verschillende resoluties.
Ik zoek het verder uit en hou jullie op de hoogte.

Flippi
Pro Member
Pro Member
Berichten: 294
Lid geworden op: 26 Jan 2011
Bedankt: 21 keer
Recent bedankt: 1 keer
Uitgedeelde bedankjes: 53 keer

Re: CSS - Responsive website vraagje

Berichtdoor Flippi » 07 Apr 2017, 04:07

Waar ik uiteindelijk op uitgekomen ben:

Code: Selecteer alles

Modern mobile devices have high-density displays where 1px in your CSS e.g. corresponds to 2.25, 4, … physical pixels on the screen hardware.

Dus Kristof, je zat in de goede richting.
De raad die ik meekreeg van een webdesigner: gebruik bij absolute positionering voor responsive sites geen pixels, maar percentages.


Terug naar “Web-en applicatie-ontwikkeling”

Wie is er online

Gebruikers op dit forum: cadsite, Glodenox en 3 gasten