22979

CSS Media Queries not working in Firefox and Chrome

Question:

One of my clients has a site with a responsive design (three based on ranges) with so many graphics they do have to reduce them for each range. We don't detect by device or anything silly though I do need to define with CSS profiles that I can later read with JavaScript as there are things we have to go out of our way and style with both JavaScript/CSS though because the background-image moves based on the "profile" the calculations have to be based off of which media query is in effect.

Unfortunately both Firefox and Chrome are acting a bit wonky when it comes to which profile is "active". The client considers 640 pixels or less to be a "phone" device, 641 ~ 991 a "tablet" device and 992 pixels and greater to be a "desktop" device. I've managed to improve a few things though I haven't figured out why "tablet" isn't working on Firefox and why both "phone" and "tablet" don't work on Chrome?

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Device Profiles</title> <style type="text/css"> @media (min-width: 0) and (max-width: 640px) { h1::before {content: 'Phone ';} } @media (min-width: 641px) and (min-width: 991px) { h1::before {content: 'Tablet ';} } @media (min-width: 992px) { h1::before {content: 'Desktop ';} } </style> </head> <body>

Profile

</body> </html>

Answer1:

Your media queries are working fine for me in both Chrome and Firefox, the only issue is the tablet breakpoint because you put min-width twice instead of max-width. Just change it to:

@media (min-width: 641px) and (max-width: 991px) { h1::before {content: 'Tablet ';} }

<a href="https://jsfiddle.net/tr8f9Lf4/" rel="nofollow">JSFiddle</a>

Answer2:

Your mistake is using two min-widths accidentally. Please try this.

@media (min-width: 0) and (max-width: 640px) { h1::before {content: 'Phone ';} } @media (min-width: 641px) and (max-width: 991px) { h1::before {content: 'Tablet ';} } @media (min-width: 992px) { h1::before {content: 'Desktop ';} }

Answer3:

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Device Profiles</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> @media (min-width: 0) and (max-width: 640px) { h1::before {content: 'Phone ';} } @media (min-width: 641px) and (max-width: 991px) { h1::before {content: 'Tablet ';} } @media (min-width: 992px) { h1::before {content: 'Desktop ';} } </style> </head> <body>

Profile

</body> </html>

Recommend

  • Python's list comprehension: Modify list elements if a certain value occurs
  • Powershell reading Excel date as 5 digit number
  • How to merge custom login (Email) with Facebook login in swift using firebase
  • How do I add the SWC file for Cairngorm to my app without FlexBuilder?
  • Real Fullscreen with Android 4 Tablets
  • failed: dlopen failed: cannot locate symbol “signal” referenced by “libSDL2.so”
  • Pass Date to a C program from Shell Script
  • Media queries in CSS
  • Android device not shown with adb
  • Restrict mouse movement over a specified window handle
  • onpreviewframe byte[] to int[]
  • Retrieving a contacts notes
  • Installing apk from within application in android
  • jQueryUI dialog replacement for confirm?
  • Position Fixed in Chrome
  • How to merge two Request in Laravel
  • Unique SMS sender id?
  • how to display   in Mozilla using XSL.
  • Avoid Inheriting Super Class Tests in ScalaTest
  • CKeditor stripping font tags instead of converting to span
  • Ionic Slide Up Slide Down Animation for only one view in sidebar
  • Is there a way to set up a fallback for the formAction attribute in HTML5?
  • Problems with toDataURL HTML5 other ways to get canvas data?
  • cell spacing in div table
  • LESS CSS how to modify parent property in mixin
  • Prevent Tomcat from caching request during starup
  • Java color detection
  • Spring Cloud Microservice Architecture Confusion
  • Is playing sound in Javascript performance heavy?
  • Visual Studio 2010 debugger build correctly - compiler pdb and linker pdb not in synch?
  • Transactional Create with Validation in ServiceStack Redis Client
  • Custom Tabgroup Appcelerator
  • Chrome doesn't support silverlight anymore? How to solve this?
  • Handling un-mapped Rest path
  • Display issues when we change from one jquery mobile page to another in firefox
  • Ajax jQuery multiple calls at the same time - long wait for answer and not able to cancel
  • PHP - How to update data to MySQL when click a radio button
  • Where to put my custom functions in Wordpress?
  • Javascript convert timezone issue
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)