[Resolved] Simple Css not working on page

[Weatherly]

We are using Simple CSS by Tom Usborne with our Generatepress theme and for some reason, the on page CSS stopped working. It didn’t work when we put it in the main Simple CSS either. But it did when we put it in Additional CSS in the theme template. I just wondered if something in a theme update might’ve caused this. Even though adding it in the other place fixed it, I’d still like to know if there is a way to prevent issues in the future. All our CSS is in the Simple CSS. It’s easier to read and more convenient, as we can also use it to put it on only certain pages. We have a clone site set up with most of the other plugins off (different issue but I noticed the problem was there too) so it seems likely to be something in Generatepress that changed (and the Simple CSS plugin hasn’t changed in years.)

[Leo]

Hi there,

I just tested the Simple CSS plugin and did not encounter any issues. We haven’t had other reports on this either.

Have you recently made some changes to your CSS? If so I would guess that there is a syntax error somewhere that stops the rest of the code from executing.

You can use a service like this to verify:
https://jigsaw.w3.org/css-validator/#validate_by_input

[Weatherly]

No. This was all the code on the Simple CSS for that page, it was the map part that specifically blew up:

.separate-containers .inside-article { padding: 0px 20px 0px 20px; !important; }
.wp-block-columns { margin-bottom: 0em !important; }
h2.has-text-align-center.homebox.has-base-3-color.has-text-color, h2.has-text-align-center.homebox.has-base-3-color.has-text-color a {
    padding-top: 25% !important;
    color: #ffffff !important;
    font-weight: bold !important;
}

/* MAP */
.maplist ul { margin: 0 0 0 3em; }
.maplist ul li { padding-bottom: 0px !important; }
.maplist ul li a { color: #ffffff !important}
.backgroundlinks { min-height: 230px; }
.wp-block-columns { margin-bottom: 0em !important; }

/*CALENDAR*/
.simcal-calendar-list.simcal-calendar-list-compact {
    position: relative;
    display: grid;
}
.simcal-events-list-container {
    display: flex;
    justify-content: center;
}
.simcal-events-list-container li {
    color: #184670;
    border-color: #416b8d !important;
    padding: 5px;
    font-size: 1.10em;
    margin-bottom: 20px !important;
}

ul.simcal-events { DISPLAY: FLEX; }

.simcal-event-details { max-width: 280px; font-size: 16px; }
.simcal-default-calendar-list { padding: 0px 0;}
h4.has-background {
    padding-top: 15px !important;
    padding-bottom: 0px !important;
    margin: 0px !important;
}
.eventheader a { color: #447c7a !important; }

[Weatherly]

Here is another page we can show you the problem.

https://waterkeeperschesapeake.org/clean-water-successes/

In the Simple CSS Meta Box in the page editor, we have the following code which was, until recently, successfully making the logos fit nicely in their div. By default the images on the timeline were set to “Cover”.

.ptl-tmpl-1 .ptl-tmpl-main .ptl-tmpl-img-box img {
object-fit: contain !important;
height: 250px !important;
min-height: 200px !important;
max-width: 300px;
max-height: 250px;
}

As you can see, the logos have reverted back to “cover” and are being cropped.

However, if I copy the same CSS from above into Simple CSS from inside Customizer the CSS works.

I don’t like this solution because I don’t like to junk up the Customizer CSS with miscellaneous code for individual pages, and like I said, until recently the Simple CSS meta box worked fine.

[Ying]

When I copy and paste the CSS from your simple CSS file on that page(clean-water-successes), the whole CSS is not valid as there’s an | in your CSS:
https://www.screencast.com/t/x06us5ig

Please check your CSS syntax error first, you can check it using the link Leo provided.

[Weatherly]

Oh! For Pete’s sake. That is EMBARRASING! So sorry to have wasted your time.

[Ying]

No worries, it happens 🙂

Glad to help!

[Author]

Posts