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