CodePen: http://codepen.io/anon/pen/RPNpaP.
I want the red box to be only 25 em wide when it's in the side-by-side view - I'm trying to achieve this by setting the CSS inside this media query:
@media all and (min-width: 811px) {...}
to:
.flexbox .red {
width: 25em;
}
But when I do that, this happens:
http://i.imgur.com/niFBrwt.png
Any idea what I'm doing wrong?
In case anyone wants to have a responsive flexbox with percentages (%) it is much easier for media queries.
flex-basis: 25%;
This will be a lot smoother when testing.
// VARIABLES
$screen-xs: 480px;
$screen-sm: 768px;
$screen-md: 992px;
$screen-lg: 1200px;
$screen-xl: 1400px;
$screen-xxl: 1600px;
// QUERIES
@media screen (max-width: $screen-lg) {
flex-basis: 25%;
}
@media screen (max-width: $screen-md) {
flex-basis: 33.33%;
}
Source: Stackoverflow.com