Media queries

Door Lord Gaga op 13-07-2015 15:19 gewijzigd op 13-07-2015 15:20

4.947 views

Hallo,

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:


@media (min-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!

Eddy E

13-07-2015 19:55

Daarom komt width: 960px; zo vaak voor ;)
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:


   div.global-container
    {
        width: 100%;
max-width: 1000px;
    }

Doet ook wat je wilt, zonder gedoe ;)

Lord Gaga

13-07-2015 20:11

Hmm, max-width was ik nog niet opgekomen, dat ga ik proberen, bedankt!

Thomas van den Heuvel

13-07-2015 20:21 gewijzigd op 13-07-2015 20:21

-_-

Dat stelde Victor hierboven ook al voor :D.

Misschien moeten we dezelfde oplossingen gewoon wat vaker aandragen :).

Lord Gaga

13-07-2015 21:23

Ik dacht dat hij de vraag verkeerd begreep.

Victor -

13-07-2015 21:31

Nee dus:)

Lord Gaga

13-07-2015 21:34 gewijzigd op 13-07-2015 21:35

Haha, sorry.

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

Marthijn Buijs

13-07-2015 21:44

Met bootstraps grid system gaat dit heel makkelijk, of als je zelf beetje CSS kan is dit ook zelf te creeren.

Fabian webstars

13-07-2015 23:44

Gewoon allebei floaten en daar een media query bij plakken om het nettjes te laten verlopen (denk ik)

Marthijn Buijs

13-07-2015 23:55

Jaa en dan de float te verwijderen bij de media query en dan komt als het goed is onder elkaar of je moet nog clear: both; toevoegen bij de media query

Eddy E

14-07-2015 09:51

Je wilt 2 divs naast elkaar, die beide 100% breed zijn met een max-width van 1000px?
Dat gaat niet werken, want dat is 200% breedte...

Reageren

Inloggen om te reageren