-
Posts
-
On my site – https://dev.theavantnyc.com/lifestyle/ – I am using a tab section at the bottom of the page. On desktop it looks great but on mobile the tab header titles are not spaced evenly horizontally
Screenshot – https://ibb.co/bB6yzFR
Look at the spacing between the tab header titles.
I did that for desktop
I just added the following
@media only screen and (min-width: 990px) {
#top .av-section-tab-title {
padding-right:135px!important;
}
}But it still did not fix it
I removed that code but now it looks worse. The text are overlapping each other.
Hi navindesigns,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (max-width: 989px) { #top .av-section-tab-title { min-width: 160px; } #top .av-section-tab-title[data-av-tab-section-title="3"] { min-width: 220px; } #top .av-section-tab-title[data-av-tab-section-title="1"] { min-width: 200px; } .js_active .av-tab-section-tab-title-container { min-width: 990px !important; } }If you need further assistance please let us know.
Best regards,
Victoria
- The topic ‘Fix spacing between tab titles on mobile’ is closed to new replies.