Search code examples
htmlreactjsmedia-queries

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

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.

Solution

  • 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>