Customiser Custom CSS Bug

I’ve tried adding some Custom CSS in a section but there appears to be a bug where its not adding a space between the template ID and the class I entered in the Custom CSS.

I added the following CSS:

But received the following output, notice having no space before .section__header which results in the style rule not working.

@media screen and (min-width: 768px) {#shopify-section-template--24149831614740__image_width_text_columns_7aVpTL .f-grid {gap: 4rem; }} #shopify-section-template--24149831614740__image_width_text_columns_7aVpTL .multicolumn-card__title {font-weight: 400;} #shopify-section-template--24149831614740__image_width_text_columns_7aVpTL.section__header {max-width: 80%; margin: 0 auto;} 

Have tried this on a different section and same behaviour. I’m wondering if its something to do with the use of ‘section’ and however Shopify parses this reads that as part of the section identifier?

Just wanted to add some additional strange happenings here…I tried using the following in hope it would resolve it:

.page-width .section__header {
  max-width: 80%;
  margin: 0 auto;
}

But this just gave me an even worse output, its stripped e-width out:

#shopify-section-template--24149831614740__image_width_text_columns_7aVpTL.pag .section__header {max-width: 80%; margin: 0 auto;}

A workaround to get this working is by using the following:

[class*="section__header"] {
  max-width: 80%;
  margin: 0 auto;
}

Despite this working, this is something that definitely needs addressing by Shopify.

dunno if it;s supported yet in shopify but have you tried nested css?

Hi Luke,

Our team have confirmed this bug appears n template sections (using the exact same selector in the Header does add a space) and only when starting the selector with .section.

I’ll update here with progress that the product team are making on this.

Hey Liam,

Great to hear the team have managed to reproduce, thanks for the update :slight_smile: