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
TL;DR If you’re making a responsive website, use min-width/max-width in your media queries rather than min-device-width/max-device-width in order to target a wider range of screen sizes. According to the 2018 Media Queries Level 4 specification draft, the device-width media feature is deprecated. It will be kept for backward compatibility, but should be avoided. 8. Appendix … Read more
For those simply looking for an answer to “Which browsers support nesting of @media rules?”, the short answer is that all modern browsers, including Firefox, Safari, Chrome (and its derivatives), and Microsoft Edge, now support nesting of @media at-rules as described in CSS Conditional 3. The code in the question with the nested @media at-rules … 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
If you don’t have to support IE9 you can just use window.matchMedia() (MDN documentation). function checkPosition() { if (window.matchMedia(‘(max-width: 767px)’).matches) { //… } else { //… } } window.matchMedia is fully consistent with the CSS media queries and the browser support is quite good: http://caniuse.com/#feat=matchmedia UPDATE: If you have to support more browsers you can … Read more
@media at-rules and media queries cannot exist in inline style attributes as they can only contain property: value declarations. As the spec puts it: The value of the style attribute must match the syntax of the contents of a CSS declaration block The only way to apply styles to one specific element only in certain … Read more
Use a comma to specify two (or more) different rules: @media screen and (max-width: 995px), screen and (max-height: 700px) { … } From https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries Commas are used to combine multiple media queries into a single rule. Each query in a comma-separated list is treated separately from the others. Thus, if any of the queries in … Read more
To enable background printing in Chrome: body { -webkit-print-color-adjust: exact !important; }
css3-mediaqueries-js is probably what you are looking for: this script emulates media queries. However (from the script’s site) it “doesn’t work on @imported stylesheets (which you shouldn’t use anyway for performance reasons). Also won’t listen to the media attribute of the <link> and <style> elements”. In the same vein you have the simpler Respond.js, which … Read more
Bootstrap 3 Here are the selectors used in BS3, if you want to stay consistent: @media(max-width:767px){} @media(min-width:768px){} @media(min-width:992px){} @media(min-width:1200px){} Note: FYI, this may be useful for debugging: <span class=”visible-xs”>SIZE XS</span> <span class=”visible-sm”>SIZE SM</span> <span class=”visible-md”>SIZE MD</span> <span class=”visible-lg”>SIZE LG</span> Bootstrap 4 Here are the selectors used in BS4. There is no “lowest” setting in BS4 … Read more