@media query works fine in Chrome, but not working on mobile

Question

I made an app by React. Everything is fine on laptop Chrome. But When I checked on my phone, @media query is not working. I read almost all questions and answers on stackoverflow. I could not find solution.

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

and exapmle of my code

.home-wrapper {
  position: relative;
  width:1366px;
}
@media screen and (max-width: 400px){
  .home-wrapper {
    width:375px;
}

Could you help me? Thanks.

Answer 1

It is most likely your phone is wider than 400px therefore doesn't enter the media query condition.

You can achieve what you want without using media queries, just using max-width with width like this:

 .home-wrapper { position: relative; max-width:1366px; width: 100%; /*or another value you want here like 90% or 90vw */ /* just for demo */ height: 200px; background: lightblue }

 <div class="home-wrapper"></div>