Custom Web Query for Ipad Pro & Iphone XS Max & Safari Performance/Rendering

I am designing a photography site and I ran into the following issue:

I have on the main page of the desktop site 4 columns with images and interactions but since this doesn’t work so well on tablet and phones i have designed a separate sections with accordions (one horizontal for tablets and portrait phone and vertical for landscape mode on the phone)
the problem is that the existing breakpoints don’t capture the newer devices with higher resolution screens so I have to add custom code to the of the page. After research on the forum and outside of it this is what i have came up with:
indent preformatted text by 4 spaces

@media screen and (max-width: 1366px){ .Desktop_Section {display: none;} .Tablet_Phone_Section {display: flex;} .Phone_Landscape_Section {display: none;} } @media screen and (max-width: 790px){ .Desktop_Section {display: none;} .Tablet_Phone_Section {display: none;} .Phone_Landscape_Section {display: flex;} }

Its not working…

can anyone please please please help me!

Here is my site Read-Only: SITE

I would start with lower case on the class names, since Webflow converts them that way on publish.

So I have tried that and it didn’t work… at those breakpoints the screen goes blank… not sure why…
this is what I am using:

@media screen
and (max-width: 1366px)
and (orientation: landscape) {
.desktop_section {display: none;}
.tablet_phone_section {display: none;}
.phone_landscape_section {display: flex;}
}

@media screen
and (max-width: 1024px)
and (orientation: portrait) {
.desktop_section {display: none;}
.tablet_phone_section {display: flex;}
.phone_landscape_section {display: none;}
}

@media screen
and (max-width: 896px)
and (orientation: landscape) {
.desktop_section {display: none;}
.tablet_phone_section {display: none;}
.phone_landscape_section {display: flex;}
}

@media only screen
and (max-width: 414px)
and (orientation: portrait){
.desktop_section {display: none;}
.tablet_phone_section {display: flex;}
.phone_landscape_section {display: none;}
}

Actually it is working now. Just not the way you want.

CloudApp

so what am I doing wrong? can you please explain what I should do to make it work how I want?

I suspect the issue is with interactions. The IX2 code is aware of the default breakpoints, not your new ones.

I would search for “break points IX2” in the forums.

It is not something I can debug for you at the moment. Heading out to teach fly casting at a local lake. :slight_smile:

thank you for the pointer! will definitely research your suggestion!

Re: interactions - i am using separate interactions for desktop and mobile… so that they don’t overlap…

Searched everywhere for IX2 and Breakpoints on the forum and cant’ get anywhere… can’t find something that would be on point for those issues…

If anyone has any ideas… I am stuck… can’t understand why the behavior is broken…

thx in advance!

anyone? it seems that there is no way to override the built in breakpoints…

additionally I am encountering an issue that the IX2 interaction, while rendering and working fine in chrome - in safari, both deskrtop and mobile are becoming glitchy - any suggestions?

by the way - is there a way to force safari on IOS to open the website in full screen by default (i.e. with the address / tab bars minimized?