Wavy shape divider appears with a fine line on mobile

Store Design
, ,
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;
}