Tab section on mobile has recently stopped working properly

Hey trancevisionyoga,

Could you try updating the theme to the latest version (5.6.9) to see if that helps please? https://kriesi.at/documentation/enfold/how-to-install-enfold-theme/#theme-update.

Best regards,
Rikard

Hi,
Thank you for the link to your site, I see that your tab images are large and the title font is also large for all of the tabs to fit on a small mobile screen, the tabs are designed to float off of th screens so the images and text can be large.
But if you want them to all fit on the screen try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 767px) { 
.av-tab-section-tab-title-container .av-tab-section-image {
	width: 80px;
}
#top .av-section-tab-title {
    padding: 10px 5px 0px 5px;
}
.av-tab-section-tab-title-container .av-inner-tab-title {
    font-size: 12px;
    word-break: break-all;
}
}

I tested this on a 425px screen size, please see the screenshot in the Private Content area, if you have a smaller screen feel free to adjust the values smaller to suit your needs.

Best regards,
Mike

Hi,
Thank you for your patience and explaining further with the screenshot, the error seems to come from a line of numbers in the first tab:
29.06./30.06./31.08./01.09./05.10./06.10./16.11./17.11.2024
on the mobile screen size this line is not wrapping so the first tab section is stretching into the second tab, please see the screenshot in the Private Content area.
I believe the reason for this is that there are no spaces in the line, so there is no natural place for a line break and wrap the text.
Please add a space somewhere in the line, perhaps after each date.

Best regards,
Mike

Hi,
Glad we were able to help, 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