Tabs width size

Support
#1

Hello,
As you can see here there is 4 tabs but one contain more text than the others. How to broaden the first one and shrink the 3 others ?

#2

Hello @Lyser,

Thanks for writing in!

Please add following CSS to fix the problem you are facing with tabs:

.x-nav-tabs.four-up>li:nth-child(1) {
    width: 30%;
}

.x-nav-tabs.four-up>li {
    width: 23%;
}

Thanks.

#3

Thx Prasant !
Now could it be possible to have the same responsive behavior as the original tabs ?
actually, the tabs stick to the left when breakpoint comes.

#4

Hi there,

Please kindly replace the suggested code with this one:

@media (min-width: 767px) {
	.x-nav-tabs.four-up>li:nth-child(1) {
	    width: 30%;
	}

	.x-nav-tabs.four-up>li {
	    width: 23%;
	}

Actually, the code is completely the same but we set it to work only for devices above 767px. So if the responsive breakpoint kicks in it will behave like it was before.

Hope it helps.

#5

Ok thx !
You can see that the first tab goes on 2 lines just before the breakpoint, why ?
(i’ve changed the min-width but it still there)

#6

Hi,

We could adjust the breakpoint so it won’t go to 2 lines.

You can add this in Cornerstone > Settings > Custom CSS

@media (min-width: 1024px)
.x-nav-tabs.four-up>li {
    float: none !important;
    width: 100% !important;
}
}

Hope that helps.

#7

Thx Paul, unfortunately there were no differences by adding this code, but i finaly found the right min-width for the @christopher.amirian code witch is 980. Eveything is fine now, thx very much.

#8

You’re most welcome.