CSS media queries not working on mobile, but work on desktop

be sure the device you are using to test the mobile version is <= 600px.

You can try to use only @media :

@media ( max-width:600px ) {
 /* CSS rules here */
}

Or maybe use em instead of pixels :

@media only screen and (max-width:37.5em) { 
    /* CSS rules here */
}

Based on your feedback in comments, I wrote a snippet for you:

div {
  height: 150px;
  width: 150px;
}

.myDiv {
  background-color: red;
  /* Other Desktop CSS Rules */
}

@media only screen and ( max-width: 600px) {
  .myDiv {
    background-color: green;
    /* Other Small Devices CSS Rules */
  }
}

<div class='myDiv'>
  That's an amazing div.
</div>

I remember working on a project and I had this problem.

Someone told me to replace:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0," />

And change it to this:

<meta name="viewport" content="width=device-width, initial-scale=1">

At least this was what solved my problem.

This website has a little bit more: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

You can try media for mobile and tablet -

@media ( min-width: 320px ) and ( max-width: 480px ) {  
  /* your CSS */  
}

For more detail read below link

link Here

My app was responsive on my localhost. But wasn't working when it was being served through AWS Elastic beanstalk. Because the HTML file was being rendered inside a frameset and the "meta tag" was missing in the beanstalk's served file header