Media query show/hide page not working on mobile

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. 

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? 

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

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?

Any other idea?