HOW TO CENTRALIZE TAB TITLE ON MOBILE

Hello @deduice ,
We can understand your queries.

We have included all the required style controllers with the Tab widget which can definitely help you to achieve what you are looking for. But, there are a few things that can’t be configured using the style controllers. In such cases, you need to accomplish the task by applying some custom CSS.

We found two more threads(1, 2) that you have created and the solution for each are same. In order to bring the Tabs on center in single line, please copy the CSS code from below and paste it to Appearance > Customize > Additional CSS section.

@media (max-width: 767px){
.elementkit-tab-wraper:not(.vertical) .elementkit-tab-nav {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}
}

Let me know if that helps.

Best Regards,
Prosenjit

Thank you or you response.

The above code above didnt work as expected. It stretched the entire tab title item as opposed to center align the text and thats not what i wanted.

When i removed this CSS code you provided days ago, the tab title get centralized by itself. Whoever, that affected another tab section on the site.

@media (max-width: 768px){
    .elementkit-tab-wraper:not(.vertical)>ul>li>a {
        padding-left: 10px !important;
        padding-right: 65px !important;
        text-align: left !important;
    }
}

======================

Here is my question: Is there a way i can just target that one particular tab section i want to make changes on and apply the code on without affecting another tab section on the site?

Hi @deduice ,
Hope you are doing well and am sorry for the inconvenience.

I got your point. I have checked your site from mobile devices and noticed that the Tab titles are currently aligned in the Center and showing properly. Maybe you have removed the CSS code that causes the Title to change the Alignment.

You will definitely be able to apply CSS code by targeting a specific Tab. You need to assign a Custom Class or ID to the Tab that you want to apply custom CSS. After that, you just need to include the ID or Class at the beginning of the CSS. The entire process can be found in this video that I’ve made for you. Please follow this video and make changes accordingly.

Let me know if you need any further assistance in this matter. I will be happy to assist you.

Best Regards,
Prosenjit

Hi @deduice ,

According to the last response on another thread, I hope all of your issues are resolved now. Feel free to reach us regarding any queries or clarifications. We will be happy to assist you.

Best Regards,
Prosenjit