When you edit the styles for a specific element in the inspector, it is as though you were editing the element’s inline style attribute: you can only place property declarations such as color: red in your example. This is even reflected in the DOM visualization itself as you edit an element’s styles. Media queries don’t … Read more
Separate them with a comma: @media only print, only screen and (max-device-width: 480px) See the spec, in particular, example VI (emphasis added): Several media queries can be combined in a media query list. A comma-separated list of media queries. If one or more of the media queries in the comma-separated list are true, the whole … Read more
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 is a pretty useful guide for mobile screen sizes. Great guide for stats on screen resolutions Google Analytics data on resolutions can be valuable as well, if you have access to it. Also, I would definitely recommend using device-width for your mobile sizes, unless you want users to see your mobile styles when they … Read more
Because the iPhone and iPod touch measure max-device-width in logical pixels rather than physical pixels even with the Retina display (as they should), the original media query used for the iPhone should be enough: @media only screen and (max-device-width: 480px) { /* iPhone CSS rules here */ } You’ll only need (-webkit-min-device-pixel-ratio: 2) if you … Read more
Using background-attachment: fixed with background-size: cover causes issues on most mobile browsers (as you’ve seen). You can try using background-attachment: scroll. This won’t give your desired effect, but you’ll see the images at least. You could use a media-query or two to limit it to devices that are tablets or phones by using @media screen … 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
You’re correct about the scroll bar, it’s because the CSS is using the device width, but the JS is using the document width. What you need to do is measure the viewport width in your JS code instead of using the jQuery width function. This code is from http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/ function viewport() { var e = … Read more
@Andy is right, double check your device-widths, or you could always just use min-width so you don’t have to know every device width. Regardless make sure you have a viewport tag, like <meta name=”viewport” content=”width=device-width,initial-scale=1.0″>.
If you want to have better performance and your structure is not too complicated. You can try Respond.JS From the author: This isn’t the only CSS3 Media Query polyfill script out there; but it damn well may be the fastest. If you’re looking for more robust CSS3 Media Query support, you might check out http://code.google.com/p/css3-mediaqueries-js/. … Read more