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.
2

What’s your store url ?