Custom css override confusion - Styles not changing?

Question

I have been working on a Joomla site (latest versions of everything) for a while and i am now customising a page created with SP page builder. I have created the following html:

<div class="whats_on_summary">
<div class="whats_on_short">
<p>When</p>
<p>Where</p>
<p>Who</p>
</div>
<div class="whats_on_icon">
<p>{zen-calendar}{/zen-calendar}</p>
<p>{zen-map-marker}{/zen-map-marker}</p>
<p>{zen-user}{/zen-user}</p>
</div>
</div>

With the following CSS:

/****** Whats on summary page ********/
.whats_on_summary {
    width:100%;
    display:inline-block;
}
.whats_on_short {
    width: 20%;
  float: left;
}

To float the zen markers next to the text. This works in codepen, but when I assign the CSS to custom.css the changes are not showing (the custom.css is being loaded and is being used in various other areas of the site successfully. If i add the CSS in chrome dev tools again it works, as does if i select the complete css selector:

#sp-page-builder > div > section:nth-child(1) > div > div:nth-child(1) > div > div.sppb-addon.sppb-addon-text-block.sppb-text-left > div > div

and

#sp-page-builder > div > section:nth-child(1) > div > div:nth-child(1) > div > div.sppb-addon.sppb-addon-text-block.sppb-text-left > div > div > div.whats_on_short

The above 2 lines are messy, and only apply to an individual 'whats_on_#' section, whereby i have multiple. Apart from having to code each section individually, which doesn't help when additional sections get added (which is planned), is there anything i can do? This is very odd, I must be missing something.

Thank you for your advise, Donna

Answer 1

Have you tried validating your css using a tool such as the W3C CSS Validator?

Your comment "It is only new additions to the file that are not showing." suggests that it may be some bad code - broken stylesheets will usually render up to the place they break.

Also, have you used the dev tools to see what's being applied to the element to make sure it's not just another style whose inheritance means it's styles are taking priority and overriding yours.

I agree with the other answer that inline styles are not a great idea.

Answer 2

It sounds like it is because you are not loading your custom css link in the head area as the last css file loaded.

I do not suggest using inline as it will bloat file sizes if you plan on using it as a class opposed to a divs id.

Answer 3

I used inline styles to rectify this:

<div class="whats_on_summary">
<div class="whats_on_short" style="width: 15%; float: left;">
<p>When</p>
<p>Where</p>
<p>Who</p>
</div>
<div class="whats_on_icon">
<p>{zen-calendar}{/zen-calendar}</p>
<p>{zen-map-marker}{/zen-map-marker}</p>
<p>{zen-user}{/zen-user}</p>
</div>
</div>

As an update to this, it was indeed a CSS validation issue - there was an error in the custom.css. I was unaware that an error in the css would mean any css after the error would not render.