Jump to content

Arch Image Block - Troubleshoot

Recommended Posts

Hi there,

Im trying to make this one image into an arch-shaped image. It's not working the way I anticipated..

Image 1: What's showing up with the CSS

Image 2: What I want (which is odd b/c it's showing up fine in the editor but not on the live site)

/* Arch image */
#block-yui_3_17_2_1_1633804367893_13901  img {
   border-top-left-radius: 50% 30% !important;
   border-top-right-radius: 50% 30% !important;

Amy help would be appreciated. Thanks!

home page, middle section

Screen Shot 2021-10-09 at 3.37.10 PM.png

Screen Shot 2021-10-09 at 3.37.41 PM.png

Link to comment

Thanks @creedon.

For anyone else, I ended up using:


  .intrinsic {
        .image-block-wrapper, // inline
        .image-inset // card, collage, overlap, poster, stack
            border-radius: 200px 200px 0px 0px !important;
            z-index : 1;
        .image-overlay {
          border-radius: 200px 200px 0px 0px !important;

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • 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.