This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Code in Custom CSS makes no changes on web page

Open 2 replies customizationpluginplugin-siteorigin-css
Johann Swanepoel
8 years ago · Last reply by Johann Swanepoel 8 years ago

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).

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

2
  1. Alex S Staff 8 years, 8 months ago

    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;
}
  2. Johann Swanepoel 8 years, 8 months ago

    Hi Alex,

    Thank you very much for the response. I’ll go give it a try again.

    Much appreciated.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread