Can flexbox detect when a flex item wraps? No. In CSS, once the browser renders the page on the initial cascade, it doesn’t reflow the document when an element wraps. As a result, parent elements don’t know when their children wrap. That’s why containers don’t shrink-to-fit their content after wrapping. That’s why you need media … Read more
Try it this way, instead of device just target the width Change @media only screen and (max-device-width : 640px) { to @media only screen and (max-width : 640px) { Also, it is more advised to target both min and max view-port width if you want to avoid considering order of media query declarations in your … Read more
Stylesheets are always downloaded, regardless of the current media, whether it be screen, print, or 3D-glasses. See: Why do all browsers download all CSS files – even for media types they don’t support? So with that in mind, keeping them all in one stylesheet will reduce http requests, where as separate stylesheets will always create … Read more
The @media query specifically for ‘phones’ is.. @media (max-width: 480px) { … } But, you may want to remove the padding/margin for any smaller screen sizes. By default, Bootstrap adjusts margins/padding to the body, container and navbars at 978px. Here are some queries that have worked (in most cases) for me: @media (max-width: 978px) { … Read more
First, your solution given in the question certainly has some usefulness to it. One thing I thought, however, was that it would be nice to define all the media query variables “near” one another (your solution would have them under each media query call). So I propose the following as an alternative solution. It also … Read more
The only reliable way to create two mutually exclusive @media blocks for any given media query is to use not to negate it in one of the blocks. Unfortunately, this means repeating your media query once for each @media block. So, instead of this for example: @media (max-width: 49.9375em) { body { color: red; } … Read more
This is what worked for me: CSS media queries and JavaScript window width do not match. Instead of using $(window).width(); which includes scrollbars get the inner width like this: function viewport() { var e = window, a=”inner”; if (!(‘innerWidth’ in window )) { a=”client”; e = document.documentElement || document.body; } return { width : e[ … Read more
Not fully clear what you want to combine, but basically you separate them with a comma eg @media only screen and (orientation : landscape) , only screen and (min-device-width : 481px) and (orientation : portrait) { …
I had to get rid of the margin around the blocks, because percentage widths are difficult to cleanly apply to elements with margins, but you can see the changes at http://codepen.io/anon/pen/jPeLYb?editors=110 : @mixin max-width($width) { @media screen and (max-width: $width) { @content; } } .container { position: relative; display: flex; flex-flow: row wrap; } .item … Read more
This can be done with Level 4 Media Queries: (Browser Support is quite good – CaniUse) Interaction Media Features The idea here is to target devices based on their capabilities. (as apposed to say, checking the size or resolution of the device which tend to be moving targets) The pointer media feature queries the quality … Read more