Media Queries: Webview vs. Mobile Phone

Code Help HTML/CSS/JS
1

Question: My media queries appear to work when resizing the webview in Replit, but once I use an actual iPhone to view the live site, the media queries no longer apply. Any idea what I may be doing wrong?

Repl link: https://replit.com/@Dprevoznik/Aphorisms?v=1

/* Make the grid a single column when the screen width is less than 500px */
  @media (max-width: 500px) {
    .grid {
      grid-template-columns: repeat(1, 1fr);
    }
  }
1 Like
2

Hey, @Dprevoznik welcome to the forums!

This happens because the width of an iPhone screen is greater than 500px I believe.

1 Like
3

Thanks! Excited to be here…Interesting, I will try this out by raising the px for the media query.

4

You would actually want to increase the max width since I believe the width of an iPhone is around 720px so try and make it 750px in the query.

5

I changed it to 900px and still no impact on my iPhone. Tried Safari and Chrome.

6

And according to Chrome’s dev tool mobile phone simulator, the iPhone 12 Pro is 390px width:
Screenshot 2023-01-04 at 12.50.22 PM

7

The first number in the dimensions is the height and the second in the width. so the width is still 844px. Try rotating it. The button is to the right of where it says No throttiling

8

Got it. Either way, still having trouble on vertical Mobile iPhone display of the actual website when using:

@media (max-width: 900px) {
    .grid {
      grid-template-columns: repeat(1, 1fr);
    }
}
9

Ok. I am going to need to take a look at this later when I’m on my computer.

10

I believe that this is an issue with chrome dev tools because if you use responsive and then change the size it works. Screen recording 2023-01-04 6.07.16 PM — Kapwing

1 Like
11

@GoodVessel92551 great suggestion on Chrome Dev Tools, but my main issue is accessing https://aphorisms.dprevoznik.repl.co/ from an actual physical mobile device (i.e. iPhone 14 pro in my case). With my actual iPhone, that URL still shows two columns, indicating that the media query to show one column is not being applied. Can you try accessing the link on a mobile device?

12

Try adding <meta name="viewport" content="width=device-width"> to the <head> of your html file because that worked for me.

1 Like
13

Wow! Looks like that did it @GoodVessel92551. I just made the update in the REPL. Thank you so much :tada:

14

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.