Archived topic
WooCommerce attribute length breaks layout + tab separation
5 replies · Started by Søren on January 5, 2019
I have some products where the attribute is long. When I'm on my iphone it 'breaks' the page layout and makes it difficult to navigate the page and images.
Are there any way to fix this? Move the attribute values/dropdown underneath the title fx?
https://www.youtube.com/watch?v=tOEs4J9iY2Y
Another issue I have with the product page are the tabs - can I add a seperator like | pipe or a dot? Or maybe have them on one line each?
Hi there,
You could try something like this: https://generatepress.com/forums/topic/product-variation-not-collapsing-effecting-mobile-versions/#post-758572
Let me know :)
Wizard of CSS :) The other question I had: can I make some seperator between the product tabs underneath? Either visual or maybe just a symbol like pipe | or a bullet •?
On desktop or mobile? Or both?
We've redesigned those tabs a little in 1.8 :)
Hmm both I guess - the problem is where I have more than one word in a tab - then it just confuses if its a one or three tabs.
You could try something like this:
.wc-tabs li:not(:last-child) a:after {
content: "|";
display: inline-block;
padding-left: 10px;
}