How to reduce the size of Minimal Theme Built-in Tabs

Solved
Highlighted
New Member
3 0 0

I am adding tabs to my website and realized the minimal theme already supports tabs so i have them turned on but they are huge. Does anyone know how i can reduce the sizing? They are causing my website on mobile version to look terrible. I have attached what they look like.

 Capture.JPG

0 Likes

Hi,

do you have a sample page URL of your store that you can link here?

• If the problem is solved remember to click ✅ to Accept Solution
• Press Like, if the answer was helpful
• Shopify/Shopify Plus custom development, optimization and consulting. You can hire me here.
0 Likes
Highlighted
Highlighted

This is an accepted solution.

You can add some custom CSS to adapt to your needs.

This work on mobile and keep the 2 tabs inline, but it is just an example that you can adapt to your style.

 

/* Drake: override theme's tab style */
.tab-switch__nav li {
    padding: 10px;
}
.tab-switch__nav li .h3 {
    font-size: 18px;
}

 

2020-09-29 03_51_16-Baby Comb And Handled Brush Set _ Personalized – McEver's Awards, Engraving & Gi.png

• If the problem is solved remember to click ✅ to Accept Solution
• Press Like, if the answer was helpful
• Shopify/Shopify Plus custom development, optimization and consulting. You can hire me here.
0 Likes
Highlighted
New Member
3 0 0

Okay great! Where do i insert this code?

0 Likes
Highlighted

Hi,

You can edit your theme code and add this at the end of file theme.scss.liquid inside Assets folder.

If it is the first time you do it, I suggest you to read first this Shopify introduction guide: Editing theme code

• If the problem is solved remember to click ✅ to Accept Solution
• Press Like, if the answer was helpful
• Shopify/Shopify Plus custom development, optimization and consulting. You can hire me here.
0 Likes