Solution 1 :

Check out the recommended breakpoints from Google used by their Material Design:
Responsive grid layouts – Breakpoints.

Also add only screen to your media query, e.g.

@media only screen and (max-width: 577px ) {
}

And add the following line in your HTML <head>:

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

Solution 2 :

You can probably approach this better but shifting your breakpoints slightly and not focussing on specific phone models unless you have to.

Move your 375px to around 450px and then reduce your 980px to about 750px.

Personally I prefer to use min-width queries rather than trying to undo changes using max width.

So something like…

.class {
  // Mobile or narrowest styles
}
@media screen and (min-width:450px){
  .class {
    // Bigger than mobile phone styles
  }
}
@media screen and (min-width:750px){
  .class {
    // Bigger than tablet styles
  }
}

and so on…

Problem :

I’m working to make my html responsiveness, I want to do something on IPhoneX(width:375px) when I write code:

@media(max-width:375px){
.news-posts-page .news-posts-section .elementor-posts{display: block;}
}

this doesn’t work for IPhoneX. but when I write this:

@media(max-width:980px){
    .news-posts-page .news-posts-section .elementor-posts{display: block;}
    }

It works fine for IPhoneX, but here is issue. it creates problem for Ipad that I don’t want. I want this code to work only for IPhoneX.

How to do this?

Comments

Comment posted by Warden330

try it with 480px since the smallest low budget tablets start at 481px or you could go with 376px. It is always better to leave 1 px range, but with 480 you should cover all smartphones not just that one iphone

Comment posted by gist.github.com/gokulkrishh/242e68d1ee94ad05f488

Or just check out this template:

Comment posted by Programmer

I tried till 979px but no use

Comment posted by stackoverflow.com/questions/46313640/…

stackoverflow.com/questions/46313640/…

Comment posted by Programmer

as I mentioned above I want 375 aur lower with device effects not larger than 375

Comment posted by alasdair009

Well by that logic put your “375 or lower” devices as the default styles and then override them at the desired point in the first min-width query (a la mobile first) 🙂

By