CODEWITHSUNDEEP
htmlreactjsmedia-queries
nihat onal
nihat onal

Reputation: 39

@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.

Upvotes: 0

Views: 668

Answers (1)

dippas
dippas

Reputation: 60563

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>

Upvotes: 2

Related Questions