Image banner Dawn theme is blocked

Technical Q&A
, ,

Topic summary

A user is experiencing issues applying CSS modifications to an image banner in the Dawn theme. None of their attempted CSS changes are taking effect.

Root Cause Identified:

  • Liquid template code (like {{ section.id }}) cannot be processed inside .css files
  • The problematic code attempts to use #Banner-{{ section.id }} as a selector in a CSS file, which won’t work since section is undefined in that context

Recommended Solutions:

  • Use Liquid code only within .liquid files or “Custom Liquid” blocks/sections
  • Create a different CSS selector that doesn’t rely on Liquid variables
  • Alternatively, place CSS in the section’s “Custom CSS” setting, which automatically prepends the section ID selector (e.g., #shopify-section-image-banner-JHGkjbfd) to isolate rules and increase specificity without needing !important

The issue remains unresolved pending the user’s implementation of the suggested approach.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

I am having problems in using CSS on my image banner!!
Everything I try to modify does not work.

Can you please hel me in solving it?

mohwhi

2

Liquid code is not processed inside .css files.

/* Imposta l'altezza del banner al 120% della finestra (puoi regolare a tuo piacere) */
  #Banner-{{ section.id }} {
    height: 120vh !important; /* Aumenta l'altezza del banner (120% dello schermo) */

And obviously, inside .css file there is no section.

Stuff like this can only work inside .liquid file or “Custom Liquid” blocks/sections…

Need to come up with a different selector.

Note that if you put code inside “Custom CSS” setting of the section, the system will automatically prepend section id selector, like

p { color: white; }

becomes 

#shopify-section-image-banner-JHGkjbfd p { color: white; }

This way the system isolates these rules to this section only and also raises their importance (without using !important)