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

[MarcHasler]

Hi everyone,

I’m facing an issue with my Shopify store (Dawn Theme) and would appreciate any help or advice.

I have vertical SVG icons (lines) implemented as design elements on both sides of the page. These icons are supposed to extend vertically but should be clipped once they reach the footer. In other words, when the lines touch the footer, they should not run beyond it or be visible below the footer container. Instead, they should stop and disappear completely.

Problem:

The SVG icons continue beyond the footer and are visible below it, which disrupts the design.

I want the SVGs to be cleanly clipped by the footer so they don’t extend beyond the footer’s boundaries.

Additionally, no new SVG instances should render below the footer.

Setup:

1.The SVG icons are implemented in the theme.liquid file.

2.The CSS for the icons is defined in base.css.

3.The SVG files are named line_down.svg and are added via asset_url.

4.I’ve tried using overflow: hidden, but it hasn’t solved the issue.

Question:

How can I ensure the SVG icons remain within the body area and are clipped at the footer? Is there a way to fix this in the Dawn Theme?

I’ve attached a screenshot of the issue. It shows how the SVG lines extend below the footer, which is not the desired behavior.

Thank you in advance for your help! I’d appreciate any suggestions or solutions.

Best regards,
Marc

[Asad-Mahmood]

What's your store url ?

[MarcHasler]

Hi, Thanks a lot for your help! The website URL would be Jinzo.ch and the Password: ajhbfjhw&/

[Asad-Mahmood]

Go to your online store -> edit code -> base.css file
and paste this code in the end

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

[MarcHasler]

Hi Asad-Mahmood,
Thanks a lot for your help. Sadly it didn't work somehow /: 

[DaisyVo]

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;
}
}

 

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

[MarcHasler]

Hi DaisyVo,
Thanks a lot for your help. Sadly it didn't work somehow /: