We are making use of the tabs position in our new website. Example here -

http://dev3.speedchills.co.uk/index.php/le-mans-24-hours/private-camping

This works great on a PC/Mac but as soon as you browse on a tablet or smartphone they automatically stack even though there is plenty of space for them to stay on a single line.

We have tried all of the responsiveness settings and they appear to make no difference to the behaviour of the tab display.

Has anyone found a way to keep a single tabbed line display as long as possible for any resolution?

Hi

@media screen and (max-width: 1080px) {
.responsive-enabled .nav-tabs li { width:100% }
}

is the problem combined with the js script that makes it display correctly

I can't test in the browser very well because of the js

@media screen and (max-width: 1080px) {
.responsive-enabled .nav-tabs li {width: inital;}
}

or inherit and see if it works combined with a new media query like above but containing a lower max-width value

You would add the lines to the custom.css File

Cheers
Paul

Hi Paul

Thanks for the speedy response. First thing I've done is edit my question - clearly some early morning typing going on there

I'm not sure I totally understand your answer - I've not really done much editing to the underlying .css before. I'll pass it onto my resident techy who should know what to do.

Yeah some typos from me as well so I edited mine as well

No edits of existing css just adding new code to the custom.css file

One line to override the existing css and other line to add a new breakpoint value

I'm not 100% sure it will work as I can't test this in the browser

Cheers
Paul