0

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?

Programmer
  • 178
  • 1
  • 2
  • 15
  • 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 – Warden330 Sep 18 '20 at 07:12
  • Or just check out this template: https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488 – Warden330 Sep 18 '20 at 07:15
  • I tried till 979px but no use – Programmer Sep 18 '20 at 07:23
  • https://stackoverflow.com/questions/46313640/iphone-x-8-8-plus-css-media-queries Maybe this can help you – Warden330 Sep 18 '20 at 07:25

2 Answers2

0

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

michaelT
  • 1,533
  • 12
  • 41
0

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

alasdair009
  • 95
  • 9
  • as I mentioned above I want 375 aur lower with device effects not larger than 375 – Programmer Sep 18 '20 at 08:05
  • 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) :) – alasdair009 Sep 18 '20 at 08:12