Menu icon Foundation
Logic under @media queries and .row max-width

Hello,

Media queries for large screen are define like this :

@media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */

and Grid, row is define like this :

$row-width: rem-calc(1000); /* result is .row {max-width:62.5rem} -> (62.5rem = 1000px) */

Where is the logic for this max-width ?
And why not 960px ?

media-queriesrowmax-width

Hello,

Media queries for large screen are define like this :

@media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */

and Grid, row is define like this :

$row-width: rem-calc(1000); /* result is .row {max-width:62.5rem} -> (62.5rem = 1000px) */

Where is the logic for this max-width ?
And why not 960px ?

Alexander Assimidis over 5 years ago

Your row width descrips the width of your Site
With Media Queries is the Size of the WIndow so that's not the same

Nicolas Joly over 5 years ago

Ok, we don't define row width for each media queries like bootstrap with container :
@media (min-width: 1200px)
.container {width: 1170px;})

but a max-width and ...!

Alexander Assimidis over 5 years ago

Is that a question?

You also aksed why not 960px - for example i use always 1220px row width that gives a nicer look on a bigger screen

Nicolas Joly over 5 years ago

Nop, not a question.
All is right for me, thanx !