Tabs Not Responsive to different screen size

[Spred]

Hi,

I’m trying to use Tabs as an element for my webpage. however, it’s not responsive to the different screen sizes. Any way to rectify this?

Thanks
Justin

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

What would you like them to look like? I’ll see if I can provide some custom css

– Kyle

[Spred]

It’ll be fantastic if the tabs respond to the screen size & remains in a single row even when viewed vertically on an iPhone 4 screen. 🙂

Thanks!

[Kyle – SUPPORT]

Try adding this to your custom css:

@media only screen and (max-width: 479px) { 
.nav-tabs > li {
  width: 33%;
}
.spb_tabs .nav-tabs li a {
  padding: 11px 7px;
}
}

– Kyle

[Spred]

Tried adding this to the Custom CSS but the text now flows out of the tab box..

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

See this is why you can’t have them all in one row on a small screen, there’s not enough room for the text

– Kyle

[Spred]

i’ll try to work around this. however, a new problem has occured and I’m not sure if it has anything to do with the new Joyn update or the CSS. I can’t align center for the tabs on the webpage now. Can you help?

Attachments:

You must be logged in to view attached files.

[Spred]

This is how the tab now appears on the page..

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Try clearing your cache, the options modal seems to not be rendering properly

– Kyle

[Spred]

Works fine now. Thanks, Kyle. Appreciate it.

[Kyle – SUPPORT]

No problem