Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #533454

    I made couple of screenprints that can explain the problem better.

    product category and tag view at widescreen displays
    That is a perfect display on good wide screen.

    text overlapping issue at smaller displays
    As you see here, Sku/Cat/Tag description is overlapping ‘clear selection’ link on smaller screens.

    text overlapping issue and broken lines at smaler displays
    This is the print from a tablet sized screen.

    desired category/tag view and smaller displays
    And that is how I would prefer it to be displayed.

    I hope that this isn’t something that would be seen as luxury and excess.


    Hi Alex,

    Could you provide us with a link to the site in question so that we can take a closer look please?



    Yes, of course:
    Details attached.

    PS. I work on my website on WAMP and update remote folder minimum once a week. Next update will be taken place today or tomorrow. Please, let me know if you’ll edit some files. I want to be sure that I won’t replace them accidentally(!)



    There’s not enough room to fit the tabs on smaller screens, thats why they’re wrapping to the second line. Not sure how you would like to change it though? Reducing the text would be necessary so readability would decrease of course.

    Best regards,


    But.. there is nothing wrong with the second line. I have never complained about wrapping. Second and third pictures clearly demonstrate the nature of issue. They show how page looks now (red marker: vertical lines of two upper tabs are broken).

    And the last picture I edited in Photoshop just to help me explain better how I want the page look like. As you may see, vertical lines are logically ended and there is no ugly text overlapping.




    Try to adjust the “clear selection” position with this:

    @media only screen and (max-width: 1200px) {
    .reset_variations {
        bottom: 10px;
        right: 10px;

    Use this for the tabs:

    @media only screen and (max-width: 1100px) {
    #top div div.product .woocommerce-tabs ul.tabs li a {
        padding: 5px 10px 10px 10px;

    Add css media queries for smaller screens.



    Hello, Ismael

    1. Ther first code moves the ‘clear selection’ link a bit higher when I resize the screen. It’s not exactly what I wanted, but as far as it’s not ovelapping tags/categories string is fine for me. So I’ll keep it this way.

    2. The second code messed up my tabs (you can try it yourself. Link to my site and login details are posted higher). All I want is that vertical tab-lines either wont break (I mean hang like dangling thread) at resizing the screen, as on 2nd and 3rd pictures, or behave like other respoinsive objects (placed in column abobe each other on smaller screens, mobiles etc)

    Here I just picked random example from themeforest:
    Look at the tabs and try to resize the browser, then you’ll immadiately understand what I mean.


    UPD. This is the product from original Enfold demo. If you resize it then you’ll see that product tabs have the same ‘broken lines’ issue as on my website:

    * * *



    you are using an old version of the theme. Updating should fix the issue with tab elements.


Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.