Product Tab Width on Desktop & Mobile

Support
#1

Hello,

Right now I have four tabs, that on desktop (with padding) I’d like to take up 25% of the space each.
So that each is the same width, and is full width across the content area.

And then on mobile, I’d like them to be full width and stacked.

Right now i have this code:

.x-nav-tabs>li {
max-width: 256px;
margin-right: 10px;
}

and i’ve tried to rejigger it a few times, but nothing works on both desktop and mobile so far.
Any advice?

Jesse

#2

Hi Jesse,

I can see you have this:

@media(min-width:980px){
   .x-nav-tabs.four-up>li{
       width:33.33339%;}
}

No need for that because by default 4 tabs are set to 25%.
It is already stack on mobile when I checked. The issue I am only seeing is it is not fullwidth. Now we need to update your CSS to make sure it will work on desktop only. Try this instead:

@media(min-width:980px){
.x-nav-tabs>li {
    max-width: 256px;
    margin-right: 10px;
}
}

Hope this helps.

#3

OK that worked, great thank you!

#4

You’re always welcome!

Cheers.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.