Hello!
We’re working on rebuilding a site for a client (with upgrades) and are having a lot of difficulty with some dynamic and organized content.
I’ve attached my best attempt in the admin space and the page we’re rebuilding.
Our issue is that the tabbed layout area is perfect in that it lets us further split up the content, and is the only block that lets us switch or hide content while also using other layout elements. However it simply does not work on mobile. The tabs do not reconfigure on smaller screens, and when we have more than 3 tabs, we’ll almost always lose a tab off screen on mobile. This would be fixed if we could put the tabs on the left or right like the tab content block, or if those content blocks allowed for more than a text block.
Custom html in a text block is not an option here, though I know it would work. Once we finish the site build we hand off and train the client who are not technical users. This is why we chose Enfold, because it’s so usable and easy to learn. So our solution for this page has to be as straight forward as possible (IE: Using existing content blocks).
Is there anything we can do here? Is there a way to make this tab section mobile friendly, or make it so the tabs format on mobile?
I made it mobile myself. Here’s my solution: Give your tab layout element the .fix-tab-section
class:
Put this in your custom css area.
Does the trick well enough.
.fix-tab-section > div > div {
display: flex !important;
justify-content: center;
align-items: center;
left: 0 !important;
flex-wrap: wrap;
min-width: initial !important;
padding-top: 0 !important;
}
.fix-tab-section span.av-tab-arrow-container {
display: none !important;
}
Hi,
Glad to hear that you have this sorted out, and thanks for sharing your solution.
Sorry for our delayed response, but if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.
Best regards,
Mike