Jump to content

Problems with image

Go to solution Solved by katycarlisle,

Recommended Posts

  • Solution
Posted

It looks like you've added this code to create a drop shadow on all your image blocks. Because the box-shadow is targeting the image block (which is rectangular) you can see the outline of the rectangle. 

.sqs-block-image {
    box-shadow: 0px 4px 8px rgba(0,0,0,.13);
    transition: .3s
}

If you don't need that effect then you can just remove the code.

If you do want a drop-shadow to apply to the image then you have to take a slightly different approach because the way Squarespace creates the image shape prevents box-shadow from being applied, even if you targeted the image directly.

This code will create a drop-shadow to match the shape of the image:

.sqs-block-image {
    filter: drop-shadow(0px 4px 8px rgba(0,0,0,.13));
    transition: filter 0.3s;
}

Oh hey! I'm Katy Carlisle, a web designer and trainer who goes by the name SQSP Queen. My pronouns are she/her and I'm based on Vancouver Island in BC 🍁 I've been using Squarespace since 2013, and work mainly with non-profits or freelancers on projects that do good. I love answering questions about Squarespace and don't expect anything in return, but if you do want to say thanks, feel free to buy me a coffee 

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.