I’m trying to apply some layout changes to a specific part of a page through the visual editor. I have added the CSS changes I want to make to the product title but in the inspector and declaration part nothing changes. The original font size an weight remains. Also live changes as in the documentation/video does nothing to the layout and appearance of the images and text.
Opening the code in the basic editor shows the changes I’ve made with the desired font size & weight but the display on the page is still the original. Am I missing something somewhere?
Page in question: http://www.christellerall.com/wedding-photography-teaching/
Could anyone help with CSS to center the product columns on the page please. I’ve tried code from two other older posts but it is not working (the plugin responsible for the display does not have style options for this issue).
Hi Johann,
Okay so if CSS isn’t taking effect, it could be due to a number of reasons, but typically it’s due to there being more specific CSS already present. I would recommend giving this article a read, Specifics on CSS Specificity – CSS Tricks.
The font-size set via this CSS:
.woocommerce-loop-product__title { font-size: 16pt; font-weight: 400; font-variant: normal; text-align: center; }That’s not working due to being overridden by the following custom CSS you’ve added:
.skinset-background h2, .skinset-background h2 a { font-size: 18px; }font-weight is being applied correctly but the font being used doesn’t have a font-weight for 400. You’ll need to either use a different font or load a version of the font that includes a font-weight for 400.
Regarding your last sentence, you can center that with the following CSS:
.woocommerce ul.products li.product a img, .woocommerce-page ul.products li.product a img { margin: 0 auto; }Hi Alex,
Thank you very much for the response. I’ll go give it a try again.
Much appreciated.