Custom css not working

Can you post a link to your site? Also, are you using a caching plugin? You may need to temporarily disable it and flush the cache while you’re making CSS changes.

I was using w3 total cache but disabled that thinking it could be causing the problem but no change.

My site is a temporary site at the moment. In the process of rebuilding and didn’t want to change the root site until I could be sure this was the format that would work bast and to iron out any glitches such as this before going live.

https://www.topcellulardeals.com/shop

I must add also that I earlier created a child theme and even changes there were not being reflected in the live css. Using Chrome and Inspect Elements, it was referencing the child theme but no changes were showing other than the original ones I had placed there while the custom css was actually working.

Can you post an example of a CSS rule that isn’t working correctly? Also, did you do anything such as add a new plugin in between the time when your custom CSS was working and when it stopped working?

I have disabled all plugins to be sure they aren’t affecting the css.

Here are examples of a few rules that I have tried.

#featured-products.fp-slider .jcarousel-item img { width:180px; height: auto; margin-bottom:10px; }

ul.products img { width:175px; height: auto; float: left; margin:0 12px 0 0; padding:0; border:0; background: none; }

.page-title {
display: none !important;
}

I may have found what could be the problem. I have WooCommerce installed and I am reading that it’s CSS loads after the theme’s style.css and may be overriding any changes I attempt to make.
What I read it says you can turn off the WC CSS to test this theory in their general settings section but I don’t have that option in the settings.

A quick Google search reveals that that option apparently has been removed from WooCommerce. You could try using !important, as you’ve done with .page-title. Also, check out this discussion. Since you already have a child theme, you could try what jameskoster and doobidoo suggested.

I’ve tried using !important, as it did work of the first few changes I tried but hasn’t worked since. Here is the snippet I am trying to get to work. When I use the Inspect Element and make these changes, I get the desired result.

.ul.products li.product img {width: auto !important;)
.ul.products li.product img {height: 250px !important;)

Is there anything wrong with the way I am entering the code?

Your formatting is a bit off: you don’t need the period at the beginning of your rules because ul refers to an HTML tag, and you have a right parentheses instead of a right bracket at the end. Your rules should look like this:

ul.products li.product img {width: auto !important;}
ul.products li.product img {height: 250px !important;}

Unfortunately, they still don’t work.

What is strange and extremely frustrating is that I am getting these codes from an online help that is using the exact same template and using WooCommerce and I see in their video it is making the exact changes I need. It works there with only changing the custom CSS but does not work when I enter it in mine.

I have deactivated ALL plugins, cleared cache, cleared history etc, to no avail.

Check your custom CSS: the line #header #navigation {float: left !important;) also is formatted incorrectly: the ending parentheses should be an ending bracket: }.

Getting stranger by the minute. That one is actually working or at least I thought it was.

I changed that to be a bracket and now all the custom css seem to be working. Is it possible that the one error was not allowing anything else below it to work? Now that I look at it, the ones above have always worked and all that I tested were below it.

That’s it. What happens is that the CSS interpreter doesn’t see the correct ending bracket, so it assumes that everything following the ending parentheses is actually supposed to be part of the same ruleset. Then the interpreter sees another starting bracket before it’s seen the appropriate ending bracket and it gets confused. And since CSS silently throws away anything it doesn’t understand, well, you already know what happens then.

All I can say is that you are a saint. I have spent days trying to figure out what was going on. Lot’s of trial and error. Have shown the code to many yet you are the only one who caught the ending bracket. Even knowing the problem per your instructions, I looked at it on my screen and could not see the difference. As large as my screen is, it is too small and light.

Time for a new pair of glasses I guess.

Thank you!!

You’re welcome. One thing that may help in the future is to get a text editor with syntax highlighting. It can help you catch things like that. jEdit is a popular open-source multi-platform editor, but there are others as well.

Another strange problem. I have entered the code below however they are working on my home page but not on my shop or catalog pages.

.widget {font-size: 14px !important;}

.page-title {display: none !important;}

.attachment-shop_catalog {
box-shadow: inset -3px -3px 5px rgba(0, 0, 0, 0.5) !important;
border: 0 !important;
}