[How To?] Mobile Not Showing All MyTabs

[seanstiasny]

Hi,

I have incorporated a new theme into my forum. On the web browser, I see all my tabs. However, on Mobile, the max amount of tabs that it will show is two. I would imagine it has something to do with the mobile width. I will attach screenshots.

Any help would be appreciated.

Thank you,
Sean

       

[User 129272]

Hello,
yes, there is a CSS declaration for the 3rd child and up of the parent element of those tabs to have the display: none property, as you can see here. I believe you could just delete those declarations from css3.css, and that issue should be fixed. (Make sure to also delete the ones for smaller screen widths, or not, depends on your preference.) It might cause some problems, though.

[seanstiasny]

Hello,
yes, there is a CSS declaration for the 3rd child and up of the parent element of those tabs to have the display: none property, as you can see here. I believe you could just delete those declarations from css3.css, and that issue should be fixed. (Make sure to also delete the ones for smaller screen widths, or not, depends on your preference.) It might cause some problems, though.

What do you mean by delete the ones for smaller screen widths? Do I remove that whole section but with other sizes? I’m a little confused.

[User 129272]

No problem  Here's how you would do it - change

@media only screen and (max-width: 768px) {
    tr td:nth-child(3)        { display:none; visibility:hidden; }
    tr td:nth-child(4)        { display:none; visibility:hidden; }
    tr td:nth-child(5)        { display:none; visibility:hidden; }
    tr td:nth-child(6)        { display:none; visibility:hidden; }
    tr td:nth-child(7)        { display:none; visibility:hidden; }
    tr td:nth-child(8)        { display:none; visibility:hidden; }
    .tmob_hide tr td:nth-child(1)        { display:none; visibility:hidden; }
    .trow_sep {    font-size: 10px;}
     img {max-width:100%}
}

to

@media only screen and (max-width: 768px) {
    .tmob_hide tr td:nth-child(1)        { display:none; visibility:hidden; }
    .trow_sep {    font-size: 10px;}
     img {max-width:100%}
}

and do the same for the other sizes, if you wish - @media only screen and (max-width: 420px), and @media only screen and (max-width: 320px). These do the same as the first one, but for smaller screen sizes. So, for example, if you only choose to edit the first one, only screens 768 pixels in width and above will be affected. The same goes for the second one - if you choose to edit that one, then only screens above 420 pixels in width will be affected, etc.

Sorry if I'm not being too clear, it's been a long day

[seanstiasny]

No problem  Here's how you would do it - change

@media only screen and (max-width: 768px) {
    tr td:nth-child(3)        { display:none; visibility:hidden; }
    tr td:nth-child(4)        { display:none; visibility:hidden; }
    tr td:nth-child(5)        { display:none; visibility:hidden; }
    tr td:nth-child(6)        { display:none; visibility:hidden; }
    tr td:nth-child(7)        { display:none; visibility:hidden; }
    tr td:nth-child(8)        { display:none; visibility:hidden; }
    .tmob_hide tr td:nth-child(1)        { display:none; visibility:hidden; }
    .trow_sep {    font-size: 10px;}
     img {max-width:100%}
}

to

@media only screen and (max-width: 768px) {
    .tmob_hide tr td:nth-child(1)        { display:none; visibility:hidden; }
    .trow_sep {    font-size: 10px;}
     img {max-width:100%}
}

and do the same for the other sizes, if you wish - @media only screen and (max-width: 420px), and @media only screen and (max-width: 320px). These do the same as the first one, but for smaller screen sizes. So, for example, if you only choose to edit the first one, only screens 768 pixels in width and above will be affected. The same goes for the second one - if you choose to edit that one, then only screens above 420 pixels in width will be affected, etc.

Sorry if I'm not being too clear, it's been a long day

No, thank you for that, I appreciate it. However, I have too many tabs, so I can't see all of them on one page. Is there a way to put them in list format?