IVG
(^_^)
August 5, 2019, 5:33pm
1
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
webdev
(Jeff Selser)
August 5, 2019, 5:46pm
2
I would start with lower case on the class names, since Webflow converts them that way on publish.
IVG
(^_^)
August 5, 2019, 6:35pm
3
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;}
}
webdev
(Jeff Selser)
August 5, 2019, 6:43pm
4
Actually it is working now. Just not the way you want.
IVG
(^_^)
August 5, 2019, 6:45pm
5
so what am I doing wrong? can you please explain what I should do to make it work how I want?
webdev
(Jeff Selser)
August 5, 2019, 6:55pm
6
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.
IVG
(^_^)
August 5, 2019, 6:56pm
7
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…
IVG
(^_^)
August 5, 2019, 7:16pm
8
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!
IVG
(^_^)
August 5, 2019, 10:35pm
9
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?
IVG
(^_^)
August 6, 2019, 2:04pm
10
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?