Plugin Contributor
Tracy Levesque
(@liljimmi)
🏳️🌈 YIKES, Inc. Co-Owner
Hello @blclasalle,
Which element is not aligned exactly? The tab names or the content inside them.
This is how they look now. How would you like them to look?
https://cloudup.com/iFiDs9jxciI
Thank you!
-Tracy
Drar Tracy @liljimmi
Thank you for your kindly reply.
Currently it looked like first one is not aligned center.
..描述
….細節
…評價(2)
It would be perfect if the tabs are aligned center like this one below
….描述
….細節
…評價(2)
in English Version
…Description
…….Detail
….Reviews(2)
How can we aligned this to center?
…means space
Thanks for your time.
-
This reply was modified 8 years, 11 months ago by
blclasalle.
-
This reply was modified 8 years, 11 months ago by blclasalle.
-
This reply was modified 8 years, 11 months ago by blclasalle.
-
This reply was modified 8 years, 11 months ago by blclasalle.
Hi @blclasalle,
Sorry for the delay; I was away last week.
There is a CSS line in your theme’s styles.css file that is causing the first tab (“Description” in English) to be without a margin. The rest of the tabs have (small) left margins on them. This is the CSS I’m referring to:
.product_layout_classic .woocommerce-tabs ul.tabs li:first-child {
margin-left: 0 !important;
}
This margin difference is what is causing the layout issue. To fix this, you could either remove this line from your styles.css file, or you could change it to:
.product_layout_classic .woocommerce-tabs ul.tabs li {
margin-left: 0 !important;
}
This will target all of the tab titles and add margins to each one (instead of just the first). I’ve done some simple tests for different screen sizes and this change seems to have no negative effect.
If you’re familiar with CSS, there are many different ways to accomplish what you’re trying to do but they will all involve adding/removing/changing your theme’s styles.css file.
Hope that makes sense,
Kevin.
