The Tabs Element isn't Responsive

Support
#1

Hi, I’ve used the Tabs element and have 3 tabs set up. The problem is, when i view it on a mobile device, a scroll bar appears instead of it resizing and being properly responsive! Is there a way of doing it so it works properly? I might be missing something as I haven’t used the Tabs before!

https://www.saboorkhan.co.uk

Here’s a screen grab:

Thanks!

#2

Hi @core365,

That is how it works by default. On smaller screen, when available space is not enough to show all tabs at once, scroll will be available. Tabs title are already responsive but there’s a minimum settings. It will not shrink to a point where it is too small for the text to be seen. Tabs margins and paddings can be adjusted but if the text is long, it will still not fit on one row to display it all tabs at once. Can you share the URL where the tab is and then your expectation? We can check if it is possible. Thank you.

#3

Hi, here’s the URL - the tab section is above the footer:

https://www.saboorkhan.co.uk

Thanks!

#4

Hey @core365,

What’s the password so we could get through the under construction view?

Thanks.

#5

Sorry, I totally forgot I had that on! I’ll put the password in a secure note.

Thanks!

#6

Hey @core365,

I’ll show you some custom CSS to achieve a responsive tab behavior but please note that it is to our understanding that you will learn Flexbox and continue to work on the custom CSS to achieve what you need.

I’d recommend that you first see the result or the behavior the custom CSS would be doing. Please watch this screencast: https://youtu.be/hiudVkXn_KE

The custom CSS used is this:

@media (max-width:640px) {
    .x-tabs-list ul {
        flex-wrap: wrap;
    }
    .x-tabs-list li {
        flex: 1 1 auto;
    }
}

Add it to your page’s Content CSS or Theme Options > CSS for global application.

You can change auto in the code to a fixed value to get a uniform size.

Hope that helps and thank you for understanding.

2 Likes
Change design or remove slider on tab element
Tabs element not mobile friendly?
#7

I had the same problem. The tabs are not really responsible.

To keep it simple i decided to use the classic accordion element on smaller screen sizes.

I made two rows, one with the tabs and one with the accordion. In the options of each row i set the “hide based on screen width” option as i liked it.

Disadvantages:

  • both elements are loaded every time so the site gets bigger. but maybe an advantage seo-wise? :wink:
  • changes in the text must be made in both elements every time. Since mine is very static, no problem for me.

Hope it helps.

#8

Hi @dos81,

Thanks for sharing that idea. Have a great day! :slight_smile:

#9

Hi @christian_y that was spot on, thank you so much!

To be honest though, I don’t see the point in this day and age, to have any elements available to use that aren’t responsive in the first place!

@dos81 Thank you for your suggestion too!

Cheers!

#10

You’re always welcome @core365!

Yes, I agree that everything should bwe responsive and also there are multiple ways to achieve it.

#11

It would have been really useful to have it responsive to begin with, as not everyone is a developer, or knows how to make things responsive and it’d save people like me having to ask yourselves as I’m always conscious of not wasting your time!

Cheers

#12

Thank you so much for your suggestions!

#13

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