Wavy shape divider appears with a fine line on mobile

Store Design
, ,

Topic summary

Mobile shows a thin line at the junction of sections where SVG wavy dividers are used; desktop renders cleanly. The dividers were added in Liquid, with the container set to position: relative and sections confirmed to have no padding.

Code details: a wrapper .custom-shape-divider-bottom-1696592733 contains an SVG wave path. CSS sets overflow: hidden, line-height: 0; the SVG uses width: calc(100% + 1.3px) and height: 75px; the path fill is #c6984b.

Attachments: two mobile screenshots highlight the visual artifact; the images are central to understanding the issue.

Suggestions: create slight overlap instead of aiming for a perfect seam by nudging the divider via top: -5px or using transform: translate to push the SVG up or down. (SVG = Scalable Vector Graphics; transform translate shifts an element’s position.) Another participant requested the store URL to inspect directly.

Current status: the overlap advice was helpful, and the poster asked for precise CSS modifications to implement it, sharing their code again. No final fix or code changes have been provided; the discussion remains open pending further guidance or a site review.

Summarized with AI on January 16. AI used: gpt-5.
1

Hi! I wanted to use some wavy shape dividers on my shop from a library. I succesfully implemented the code in the liquid files, and on desktop it seems ok, but on mobile this fine line appears on every section that I used them. Does anyone know how to fix this issue for mobile? I changed the position attribute to “relative” from “absolute” to make it work and there is no padding on the sections that’s causing the issue. Thank you!

This is an example of code that I used for them:

CSS: .custom-shape-divider-bottom-1696592733 {
position: relative;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
}
.custom-shape-divider-bottom-1696592733 svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 75px;
}
.custom-shape-divider-bottom-1696592733 .shape-fill {
fill: #c6984b;
}

IMG_0565.jpeg
IMG_0565.jpeg1242×523 15.4 KB

IMG_0574.jpeg
IMG_0574.jpeg1242×886 26.8 KB

2

@sirensiren ,

Could you please share your store URL? so Can check and guide you accordingly.

3

Create some overlap don’t try to achieve perfectly seamless alignments.

To to use top position rule to push it up down or a transform with a translate position rule

top: -5px;

etc etc

4

Hello! Thank you for your insight, it has been very helpful. Could you please help me modify the CSS code according to your instructions to make sure I won’t do something wrong? For example, how should the below code be edited to make the divider overlap with the section a little bit?

CSS: .custom-shape-divider-bottom-1696592733 {
position: relative;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
}
.custom-shape-divider-bottom-1696592733 svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 75px;
}
.custom-shape-divider-bottom-1696592733 .shape-fill {
fill: #c6984b;
}