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>
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...