Question 192413 in Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Fixing the problem of responsive mode in WooCommerce custom tabs (ul -> li)

I have encountered a problem in the responsive mode of these WooCommerce tabs which are (ul -> li), as you can see in the picture, there is no problem in the desktop mode, but in the mobile mode, the tabs are placed on top of each other, and if the ul style is width: max – content; Let me put all the tabs in one line, but they will leave the page and it will be bad

What do you suggest to solve this problem that is both standard and user friendly (beautiful)? (I am looking for the best and most professional solution)

As much as possible, I don’t want to use floats

enter image description here

Tags:

2

Answers


  1. 0

    I think that a simple dropdown will look the best.
    Excample

    Login or Signup to reply.
  2. 0

    enter image description here

    This is a common solution for your problem and definitely not professional, if you like to test it because I tested it and it worked without any problem.
    Just add the following codes to the ul tag:

    ul {
     display: flex;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
}

    By doing this, all your tabs will be scrolled on the x axis (only tabs and content or other page objects will not be scrolled) and you can display as many tabs as you have without any problems.
    You can even move the tabs to the side columns for a better and more beautiful display, which of course will make your content have less space, so it all depends on you.

    + update

    To make the appearance of the tabs a little better, you can use the following codes:

    ul {
     display: flex;
     overflow-x: auto;
     text-wrap: nowrap;
     -webkit-overflow-scrolling: touch;
     width: 96%;
     padding: 0 1rem 0 1rem;
}

    Also, because I saw that your design had border-radius, that’s why I sent this update to apply your border-radius.
    Other changes depend on your opinion and design, which can be easily done with a little css.

    enter image description here

    Reference:
    codyhouse.co

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search