![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: overlapping, product tabs, SKU
-
AuthorPosts
-
November 10, 2015 at 5:03 pm #533454
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 #533854Hi Alex,
Could you provide us with a link to the site in question so that we can take a closer look please?
Regards,
RikardNovember 11, 2015 at 12:43 pm #533958Yes, 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 #534574Hi,
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,
RikardNovember 12, 2015 at 11:49 pm #535145But.. 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 #535822Hey!
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,
IsmaelNovember 17, 2015 at 10:37 am #537205Hello, 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 #538958Hi!
you are using an old version of the theme. Updating should fix the issue with tab elements.
Regards,
Andy -
AuthorPosts
- You must be logged in to reply to this topic.