Why are my CSS3 media queries not working on mobile devices

Question

In the styles css  I am using media queries  both of which use a variation of     --  Normal CSS styles  ----------------------------------     media only screen and  max-width  767px           --  Mobile styles go here ---------------------------       The sites resize to the layout I want in a regular browser  Safari  Firefox  when I shrink the window  however  the mobile layout isn t shown at all on a phone  Instead  I just see the default CSS   Can anyone point me in the right direction

User · Answer

It may also happen if the browser zoom level is not correct  Your browser window zoom should be 100   In Chrome use Ctrl   0 to reset the zoom level

User · Answer

For me I had indicated max-height instead of max-width   If that is you  go change it         media screen and  max-width  350px          Not max-height          letter              font-size 20px

User · Answer

Weird reason I ve never seen before  If you re using a  parent   child  selector outside of the media query  in Firefox 69  it could break the media query  I m not sure why this happens  but for my scenario this did not work      media whatever        child   display  none        But adding the parent to match some other CSS further up the page  this works      parent  gt   child   display  none      Seems like specifying the parent should not matter  since an id is very specific and there should be no ambiguity  Maybe it s a bug in Firefox

User · Answer

The OP s code snippet clearly uses the correct comment markup but CSS can break in a progressive way     so  if there s a syntax error  everything after that is likely to fail  A couple times I ve relied on trustworthy sources that supplied incorrect comment markup that broke my style sheet  Since the OP provided just a small section of their code  I d suggest the following   Make sure all of your CSS comments use this markup           -- which is the correct comment markup for css according to MDN  Validate your css with a linter or a secure online validator  Here s one by W3  More info  I went to check the latest recommended media query breakpoints from bootstrap 4 and ended up copying the boiler plate straight from their docs  Almost every code block was labeled with javascript-style comments     which broke my code     and gave me only cryptic compile errors with which to troubleshoot  which went over my head at the time and caused me sadness   IntelliJ text editor allowed me to comment out specific lines of css in a LESS file using the ctrl   hotkey which was great except it inserts    by default on unrecognized file types  It isn t freeware and less is fairly mainstream so I trusted it and went with it  That broke my code  There s a preference menu for teaching it the correct comment markup for each filetype

User · Answer

I encountered this issue recently too  and I later found out it was because I didn t put a space between and and    This was the error   media screen and max-width 768px       Then I changed it to this to correct it   media screen and  max-width 768px

User · Answer

Well  in my case  the px after the width value was missing     Interestingly  the W3C validator did not even notice this error  just silently ignored the definition

User · Answer

All three of these were helpful tips  but it looks like I needed to add a meta tag    lt meta content  width device-width  initial-scale 1  name  viewport    gt    Now it seems to work in both Android  2 2  and iPhone all right

User · Answer

For everyone having the same issue  make sure you actually wrote  quot 120px quot  instead of only  quot 120 quot   This was my mistake and it drove me crazy

User · Answer

Don t forget to have the standard css declarations above the media query or the query won t work either    edcar letter      font-size 180px      media screen and  max-width  350px         edcar letter          font-size 120px

User · Answer

I suspect the keyword only may be the issue here  I have no issues using media queries like this    media screen and  max-width  480px

User · Answer

The sequential order of css code also matters  for example    media max-width 600px      example-text       color red          example-text     color blue      the above code will not working because the executed order  Need to write as following    example-text     color blue     media max-width 600px      example-text       color red

User · Answer

media all and  max-width 320px and min-width 0px       container       width  100         sty       height  50       width  100       text-align  center      margin  0          username     margin-bottom  20px    margin-top  10px

User · Answer

Throwing another answer into the ring  If you re trying to use CSS variables  then it will quietly fail    media screen and  max-device-width  var --breakpoint-small        CSS variables don t work in media queries  by design

User · Answer

I use a few methods depending  In the same stylesheet i use   media  max-width  450px   or for separate make sure you have the link in the header correctly  I had a look at your fixmeup and you have a confusing array of links to css  It acts as you say also on HTC desire S

User · Answer

Including a meta tag like below can cause the browser to handle the viewport zooming differently    lt meta content  width device-width  initial-scale 1  name  viewport    gt

User · Answer

i used bootstrap in a press site but it does not worked on IE8  i used css3-mediaqueries js javascript but still not working  if you want your media query to work with this javascript file add screen to your media query line in css   here is an example     lt meta name  viewport  content  width device-width    gt     lt style gt        media screen and  max-width 900px           media screen and  min-width 900px  and  max-width 1200px           media screen and  min-width 1200px      lt  style gt    lt link rel  stylesheet  type  text css  href  bootstrap min css  gt   lt script type  text javascript  src  css3-mediaqueries js  gt  lt  script gt    css Link line as simple as above line

User · Answer

Today I had similar situation  Media query did not work  After a while I found that space after  and  was missing  Proper media query should look like this    media screen and  max-width  1024px

User · Answer

I was having this same problem and it turns out my media queries were in the wrong order  They should be defined from widest to smallest in the CSS

User · Answer

Always mention max-width and min-width in some unit like px or rem  This figured it out for me  If I write it without the unit and only the number value  browser can t read the media queries  example  this is wrong  media only screen and  max-width 950  and this is right  media only screen and  max-width 950px

[html] Why are my CSS3 media queries not working on mobile devices?

Examples related to html

Examples related to css

Examples related to media-queries

Examples related to mobile-website