Return to previous page

Horizontal tabs get cropped on mobile - by Noah Joshua Zollinger

This topic has 6 replies, 3 voices, and was last updated 4 years ago ago by Olga Barlow

Noah Joshua Zollinger

Participant

April 18, 2020 at 01:10

Hey Support team

I’m having the problem that horizontal tabs get cropped on the mobile.
On the desktop it works: https://prnt.sc/s1iyad

On the mobile it looks like that: https://prnt.sc/s1izgq

Is it possible to show these tabs on multiple lines or something like that?

Best regards
Noah

Please, contact administrator
for this information.

#233858 Copied Theme version: 6.3.1 / Core 2.3.1 WooCommerce version: 5.4

5 Answers

Rose Tyler

Support staff

April 18, 2020 at 08:56

Hello,

There is a scroll of tabs titles – https://gyazo.com/bbddf4fc2463e844d97b353cfbbb5a5a

Regards

#233873 Copied

Noah Joshua Zollinger

Participant

April 18, 2020 at 13:27

Hi Rose

I know that I can horizontally scroll the tabs. But it’s not a nice solution. And I don’t think that customers visiting my website know that these tab titles are scrollable.. I mean that’s not obvious..

Isn’t there another solution?

I also can’t use the accordion style at the moment because the text is getting cropped on the mobile.. (You’ll have to scroll horizontally to read the text.)
See screenshot: https://prnt.sc/s1rf7z

Best regards
Noah

#233898 Copied
Rose Tyler

Support staff

April 18, 2020 at 14:21
Hello,

1) No, there is no other option for that, but you can use custom CSS –
```
@media only screen and (max-width: 992px) {
   .woocommerce-tabs.horizontal .wc-tabs {
       white-space: unset;
       word-break: normal;
       overflow: unset;
       flex-wrap: wrap;
   }   
}
```
2) Thanks for the report, it was passed to our technicians.

Regards
#233903 Copied
Noah Joshua Zollinger

Participant

April 23, 2020 at 22:23

Hi,

That worked, thanks!

Regards,
Noah

#234521 Copied

Olga Barlow

Support staff

April 24, 2020 at 06:54

Hello,

You are welcome.

Regards

#234536 Copied
Viewing 6 results - 1 through 6 (of 6 total)