SOLVED

Landing page CSS - Media queries working on desktop, but not on mobile

Go to solution
Highlighted
Level 1

Landing page CSS - Media queries working on desktop, but not on mobile

Here is an example page: https://info.identitymindglobal.com/KYC-digital.html

It is a guided landing page with media queries in a linked css file, and it works as expected in desktop browser (breakpoint is at 750px width), but not on mobile (width confirmed as 414px on iphone 7plus). 

Seems like there's an easy fix, but what is it?

Thanks!

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Level 1

Re: Landing page CSS - Media queries working on desktop, but not on mobile

Figured out the issue, had not registered viewport in the meta.  Adding this to the <head> resolved the issue.

<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

View solution in original post

1 REPLY 1
Highlighted
Level 1

Re: Landing page CSS - Media queries working on desktop, but not on mobile

Figured out the issue, had not registered viewport in the meta.  Adding this to the <head> resolved the issue.

<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

View solution in original post