Jump to content

Media query show/hide page not working on mobile

Recommended Posts

Site URL: https://gregorylassale.com

I created two versions of my homepage: 

  • "homepage-medium" for large screen.
  • "homepage-small" for mobile.

I  am trying to sho/hide the correct version via media query. It's working on my desktop but not my tablet. 

@media only screen and (max-width: 1194px) { #homepage-medium { display: none; } } 
@media only screen and (min-width: 1195px) { #homepage-small { display: none;} }

 

 I have tried different breakpoints, but on mobile (iPad) either both versions are shown or only "homepage-medium" (instead of  "homepage-small"). I am using an iPad Pro 11 (viewport 834 x 1194px) to test out the mobile version.

Hoping someone will be able to figure out what I'm doing wrong. 

Thanks. 

 

Link to comment
  • GregLassale changed the title to Media query Show/hide page not working on mobile
  • Replies 4
  • Views 1.5k
  • Created
  • Last Reply
  • GregLassale changed the title to Media query show/hide page not working on mobile
On 5/6/2021 at 9:02 AM, tuanphan said:


@media screen and (max-width:640px) {
#homepage-medium { display: none !important; }
}
@media screen and (min-width:641px) {
#homepage-small { display: none !important; }
}

 

Same problem : my desktop shows the correct version, but my iPad shows the wrong one. I've tried a bunch of different breakpoints and my iPad either shows the wrong version or both.  Any other idea?

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.