Tabs On Mobile Dissapear Between 768px and 700px Wide
-
I am using the Vertical Tabs item of Shortcodes Ultimate on my site. I have several image galleries on my site. You can see one of the more complex ones here –>. https://www.sgclark.com/wallpapers/ncaa/
A simpler one is here–> https://www.sgclark.com/wallpapers/baseball/
When I test out the responsive tabs on various device sizes, I’ve noticed that the tabs disappear when a device screen is between 700px wide and 768px wide. For example, when I look at my site on my iPhone 12 held in landscape view, the tabs do not display on the page. When I switch it to portrait, the accordion version of the tabs display as expected.
When I use a responsive simulator and expand the screen to 769px, the ‘normal’ tabs display and work as expected. Similarly, when I bring the screen to 699px wide, the accordion version of the tabs display and work as expected. However, when the screen is between 700px and 768px, the tabs are no where to be found.
Is this a bug within the CSS files/settings of the core plugin? Is this something that can be fixed so that at the 768px break point, any screen below that width has the accordion style? And any screen above that width has the regular tabs?
The page I need help with: [log in to see the link]
-
Hi @sgclark ! We could confirm the styling issues on your page. However, we’re unable to recreate it on our end. Have you checked if the settings for desktop, tablet, and mobile display under Tab Layout in the inspector are all set? Screen widths from 700px to 899px are what our CSS file define as tablet display for the tabbed content block.
Also, have you tried switching to another theme? The 768px breakpoint might be coming from a style conflict.
Yes, I can confirm that those icons are selected correctly across all the pages that have the “Tabbed Layout” content for the different devices. I have checked and double checked that previously across all those pages.
And thanks for verifying that it works correctly on your end. So it is clearly something local to my site/pages.
That’s good to know re your CSS and how you define the size of Tablet display. I’ll look at the different CSS files that are attached to my site. There must be a conflict happening somewhere. Its not a ‘showstopper’ issue or am I having anyone complain, but something I had noticed and was trying to figure out how to resolve it.
Thanks for your help.
- The topic ‘Tabs On Mobile Dissapear Between 768px and 700px Wide’ is closed to new replies.
