Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Media query show/hide page not working on mobile


Question

Posted (edited)

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. 

 

Edited by GregLassale
Link to post
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

4 answers to this question

Recommended Posts

  • 0

This one is driving me nuts. I don't understand why the query is working on desktop but not on mobile. The 1194px breakpoint works on my iPad for other scripts, but not the code above. Any idea, anyone? 

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

 

Link to post
  • 0
Posted (edited)
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?

Edited by GregLassale
Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...