Jump to content

Mikey_Costello

Circle Member
  • Posts

    1
  • Joined

  • Last visited

Personal Information

Mikey_Costello's Achievements

Level 1

Level 1 (1/20)

0

Reputation

  1. 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); }
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.