Media queries
Op dit moment heb ik een div van 100% breed. Wat ik nu wil is dat wanneer de browser 1000px of breder wordt, de div 1000px wordt. Dit doe ik met het volgende stukje CSS:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
@media (min-width: 1000px)
{
div.global-container
{
margin: 0px auto;
width: 1000px;
}
}
{
div.global-container
{
margin: 0px auto;
width: 1000px;
}
}
Het probleem is, wanneer er een verticale scrollbar aanwezig is op de pagina, dan past de div van 1000px natuurlijk niet op een pagina van 1000px en dus vormt zich een horizontale scrollbar.
Ik heb voor mijn gevoel het hele internet afgezocht maar kan geen enkele (goede) oplossing vinden voor dit probleem. Hebben jullie misschien een idee hoe ik dit fatsoenlijk kan oplossen?
Alvast bedankt!
Gewijzigd op 13/07/2015 15:20:37 door Lord Gaga
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
@media (min-width: 1000px)
{
div.global-container
{
overflow-x:none;
margin: 0px auto;
width: 1000px;
}
}
{
div.global-container
{
overflow-x:none;
margin: 0px auto;
width: 1000px;
}
}
Gewijzigd op 13/07/2015 16:32:27 door Fabian webstars
Code (php)
1
max-width: 1000px;
Hiermee wordt de div maximaal 1000px breed.
Of zet anders even een screenshot van het probleem hier in dit topic, dan snappen we hopelijk beter wat je bedoeld.
De div global-container is 100% breed. Wanneer de body een breedte bereikt van minimaal 1000 pixels, wordt global-container ook 1000 pixels, en wordt deze gecentreerd. (Dit d.m.v. die media query)
Het probleem is echter de verticale scrollbar die zich soms voordoet in de body.
De media query zal zeggen dat de body nog steeds 1000 pixels is, wat er in resulteert dat global-container ook 1000 pixels is. Maar die scrollbar neemt ook ruimte in beslag.
Er is dus een body van 1000 pixels breed, met daarin global-container van 1000 pixels breed en een scrollbar van +/- 20 pixels breed.
Dat past niet, want de body is 1000 pixels breed en de inhoud 1020 pixels. Dus ontstaat er een horizontale scrollbar.
Gewijzigd op 13/07/2015 17:53:33 door Lord Gaga
Lord Gaga op 13/07/2015 18:58:11:
Zou kunnen, maar in mijn geval springen de 2 "layouts" niet mooi in elkaar over op die manier.
Das een kwestie van ontwerp :).
Kies een andere breakpoint, zorg dat je overflow verbergt (beide reeds voorgesteld) of vermijd dat je hier in eerste instantie tegenaan loopt door je design wat flexibeler te maken (zorg dat je wat "lucht" overhoudt buiten die 1000px ofzo). Veel andere smaken zijn er niet?
Die stappen pas over als je onder de 1024 of 1000 pixels komt. Houd altijd wat reserve.
Wat je ook kan doen, zonder media-queries:
Code (php)
1
2
3
4
5
2
3
4
5
div.global-container
{
width: 100%;
max-width: 1000px;
}
{
width: 100%;
max-width: 1000px;
}
Doet ook wat je wilt, zonder gedoe ;)
Dat stelde Victor hierboven ook al voor :D.
Misschien moeten we dezelfde oplossingen gewoon wat vaker aandragen :).
Gewijzigd op 13/07/2015 20:21:40 door Thomas van den Heuvel
Het enige wat ik nog voor elkaar moet zien te krijgen is hoe ik 2 divs die naast elkaar staan in de "desktop" versie, onder elkaar komen te staan in de "mobile" versie. En anders toch maar wat ruimere media queries gebruiken. :/
Gewijzigd op 13/07/2015 21:35:31 door Lord Gaga
Dat gaat niet werken, want dat is 200% breedte...