As a suggestion, I would give the base class for those tab links, a width of 33.333% with the first two tab links having float set to left and third tab link set to float off. This will cause the tab links to be edge to edge with no gaps.
At the base tab link class, set the text to center typography to center the tab labels.
If you want to center and make the tabs menu a smaller width, you can do that by selecting the Tabs Menu and give a class width of 60% (or some other value). To center the menu, set the left and right margin to auto.
If it helps, I made a quick video to give you some ideas:
Thanks Dave. Very helpful. Curious why those changes are needed when they seem to load right without them in the preview? Seems the ideal setup would be that the preview and published site look the same without special changes.
Hi @speck, those changes are not needed if you want to use an auto width and do not care about the gaps. The auto width on the links combined do not equal the width of the tab menu, so that is what causes the whitespace. The white space is sometimes hard to view in the designer, it really depends on the design.
Hi @speck, that is odd, the only thing I can say without being able to see the previous state to compare, is that maybe since they elements were using auto width, something else on the page layout changed (some other element) and had affect.
If that happens again, let me know and I am happy to check it
I am still taking a look at the Timeline layout issue, and will get back as soon as possible for that
Hey Dave. Just checking in to see if you found anything on the timeline issue. We’re close to launching, so I may just dive in again to see what I can find.
