Dezelfde margin-top op verschillende devices.

[aDutchCow]

Mijn vraag
Heel basaal:
Ik heb een banner met daarboven een <div> die ik gepositioneerd heb met absolute zodat deze een beetje overlapt met de banner. Dit doe ik door middel van een margin-top toe te voegen aan de div. Echter moet de pagina responsive zijn maar zodra ik dit doe, wordt de content natuurlijk smaller en klopt deze margin niet meer. Hoe kan ik er voor zorgen dat deze div op dezelfde hoogte blijft?

Relevante software en hardware die ik gebruik
HTML en CSS

Wat ik al gevonden of geprobeerd heb
Verschillende pogingen gedaan om anders te positioneren.

[DJMaze]

Cascading Stylesheet:

margin-top: 3vw;

https://css-tricks.com/viewport-sized-typography/

aDutchCow schreef op maandag 6 maart 2017 @ 17:32:
Relevante software en hardware die ik gebruik
HTML en CSS

Wat ik al gevonden of geprobeerd heb
Verschillende pogingen gedaan om anders te positioneren.

En laat je code eens zien. Er wordt hier meer inzet verwacht.

[ Voor 76% gewijzigd door DJMaze op 06-03-2017 19:00 ]

[Marc3l]

CSS media queries?

[q-enf0rcer.1]

Misschien in plaats van margin-top gebuik maken van padding-top. Gebruik je hier een percentage dan is dit een percentage ten opzichte van de width. Afhankelijk van de context is dit een mogelijkheid.

Voorbeeld:

code:

.parentElem { width: 300px; }
.childElem { padding-top: 50%; /* komt overeen met 150px; */ }

[ Voor 24% gewijzigd door q-enf0rcer.1 op 09-03-2017 11:59 ]