SVG icons should be clipped at the footer – Shopify Dawn Theme Issue

Store Design
, ,

Topic summary

A user is experiencing a design issue with vertical SVG line icons in the Shopify Dawn Theme. The SVG elements are positioned on both sides of the page and should stop at the footer boundary, but instead continue rendering below it.

Technical Details:

  • SVG icons implemented in theme.liquid file
  • CSS defined in base.css
  • Previous attempts with overflow: hidden were unsuccessful
  • Screenshots show the lines extending beyond the footer container

Proposed Solutions:
Two community members (DaisyVo and Asad-Mahmood) suggested identical CSS fixes:

  • Target specific SVG instances using :nth-child(5) and :nth-child(6) selectors
  • Hide these elements on desktop screens (min-width: 1024px)
  • Apply via Custom CSS in Theme settings or directly in base.css

Current Status:
The issue remains unresolved — the original poster tested both suggested solutions but reported neither worked. The discussion is ongoing with no successful fix identified yet.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
4

Hi @MarcHasler

I hope you are well. You can follow our instructions below:

1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there

Here is the code for Step 3:

@media screen and (min-width: 1024px){
.line-graphics-wrapper > img:nth-child(5), .line-graphics-wrapper > img:nth-child(6) {
    display: none !important;
}
}

image (49).png
image (49).png1308×846 97.6 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.