Sku/Category/Tag overlapping and woocommerce tabs border issues @ smaler display - Support

Tagged: overlapping, product tabs, SKU

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
November 10, 2015 at 5:03 pm #533454

hexquare
Participant

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

That is a perfect display on good wide screen.

…

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

…

This is the print from a tablet sized screen.

…

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.
Thanks!

November 11, 2015 at 6:40 am #533854

Rikard
Keymaster

Hi Alex,

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

Regards,
Rikard

November 11, 2015 at 12:43 pm #533958

hexquare
Participant

Yes, of course: sciot-deboes.com
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(!)

November 12, 2015 at 6:43 am #534574

Rikard
Keymaster

Hi,

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,
Rikard

November 12, 2015 at 11:49 pm #535145

hexquare
Participant

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.

Cheers,
Alex.

November 14, 2015 at 11:00 am #535822
Ismael
Moderator
Hey!

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.

Regards,
Ismael
November 17, 2015 at 10:37 am #537205

hexquare
Participant

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: http://wineshop.themerex.net/product/2000-vsj-reserve-rose-of-syrah-2/
Look at the tabs and try to resize the browser, then you’ll immadiately understand what I mean.

Thanx

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: http://kriesi.at/themes/enfold/product/kitchen-craft-home-made-glass-terrine-jars/

* * *

November 19, 2015 at 1:54 pm #538958

Andy
Inactive Moderator

Hi!

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

Regards,
Andy
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.