Site URL: https://www.lindseyboluytphotog.com/
I followed this tutorial https://ryandejaegher.com/how-to-make-wavy-section-transitions-in-squarespace-7.1/#comment-section to create an "arch" transition on the bottom of the first image block on each page for a more organic feel. Everything looks as desired on a desktop/laptop screen:
The mobile preview in my Squarespace account also looks correct:
However, the mobile appearance of the published site is different. The nice, pretty arch is transformed into some sort of trapezoid instead:
Does anyone know how to correct this? I appreciate your help, thank you!
Here is the code I have saved in Custom CSS:
// Adding arch transition to photo on Weddings page //
[data-section-id="61d3af566a70606092df0ff5"]:after {
position: absolute;
content: '';
width: 100%;
height: 120px;
bottom: 0;
left: 0;
background: #e6ded1;
/* Use the ID from your SVGs Clip Path*/
clip-path: url(#archDown);
}
And the code for the .svg arch shape saved into the Footer Injection so it can be used on multiple pages:
// Adding arch transition to photo on Weddings page //
[data-section-id="61d3af566a70606092df0ff5"]:after {
position: absolute;
content: '';
width: 100%;
height: 120px;
bottom: 0;
left: 0;
background: #e6ded1;
/* Use the ID from your SVGs Clip Path*/
clip-path: url(#archDown);
}