Tabs on the menu page look and work fine everywhere but ios devices. I have checked flex box divs etc and cannot figure out the issue. I have also searched and read other topics and none of them seem to resolve my issue will attach screen shots.
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
@rsilbereis1 Rachel,
On mobile landscape, remove flexbox and put back into block view on the Main menu tabs menu block.
See it that helps?
When I use my testing tool thats what I see.
Tried that (currently) and the ios on my iphone is still the same issue @QA_Brandon
@rsilbereis1, I am not sure to be honest. Ive actually never had an issue with tabs on iOS devices before. Is quite concerning.
Have to take a deeper dive into this issue.
Thank you. I cannot figure it out and I have tried a bunch of stuff div blocks, removing flex box…
Hello!
Ben here with the Webflow Customer Support Team!
I did some digging and it looks like this is an issue with breakpoints. The phone you’re mentioning has a screen width of 896px in portrait mode. In the Webflow Designer, that actually ends up pulling the tablet mode at that width.
This is a part of a larger project that we’re working on here at Webflow, but I don’t know how quick our fix on this will be.
In the meantime, you can force the mobile view by adding this custom code to the head section of the custom code for that page or in the site wide settings.
<style>
@media (max-width:896px){
.menu-page-tabs-menu {
display: block;
width: 100%;
margin-top: 10px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.tabs,
.tabs.w--current {
position: static;
width: 100%;
margin: 3px 0;
padding-top: 12px;
padding-bottom: 12px
}
.tabs {
display: block;
min-height: 55px
}
.tabs.w--current {
min-height: 70px;
border: 1px solid #534d47;
text-align: left
}
.menu-page-tab-title {
font-size: 15px;
line-height: 13px;
text-align: left
}
.menu-tabs-pane {
padding-top: 25px
}
.menu-list-item {
padding-right: 57px
}
.menu-item-title.description,
.menu-item-title.dietary-class {
font-size: 11px;
line-height: 16px
}
}
</style>
Let me know if you have any other questions and I’ll be happy to assist you further! 
@rileyrichter Thank you. I tried that and added the code the custom code on the menu page and it still doesn’t work.
When I look at the code there is an error Custom Code is not validated. Incorrect Code may cause issues when the page is published
line 7 & 8 are highlighted which is the lines
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
@rileyrichter just following up to see why the code you suggested is giving the error and not working for me?
I have found that if there is an error after so many different published attempts to do one of 2 things.
First, unpublish the site and then publish new. See if that makes the changes.
Second, would be to start new with a tab layout and then just copy/paste your content and use the actual class names where appropriate. 9/10 this works more often.
Lmk what you figure out? I did do a test with things and on iOS devices, it works on Chrome but in Safari it does not.
Happy Designing,
Brandon
@rileyrichter sent a code as a workaround but it did not work. Its the layout in safari or my iPhone X that is the issue
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.