Jump to content

Removing drop shadow from outside of block (keeping drop shadow on images)

Recommended Posts

Hi guys,

I've used this code to add drop shadows to images in certain blocks on my website but instead of just adding it to the images it's also added the drop shadow to the top and bottom of the blocks creating a visual division that I don't want (images attached as my website isn't live yet). 

The code I've used.

[data-section-id="619ce24f30fccf633e72c259"]
 { filter: drop-shadow(2px 2px 5px #939799); 
}

Does anyone know how I can remove the drop shadow from the block itself but keeping the drop shadow on the images within the block? Thanks so much!

 

Screen Shot 2021-11-28 at 9.19.39 pm.png

Screen Shot 2021-11-28 at 9.20.03 pm.png

Link to comment
  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

1 hour ago, KylieSek said:

I've used this code to add drop shadows to images in certain blocks on my website but instead of just adding it to the images it's also added the drop shadow to [everything].

This is because the CSS is not specific enough. You are targeting every element within this section, not just the images and this adds the effect to every visible element.

You can fix the issue by adding the correct selectors before the first curly brace. I can't tell you what they are without seeing the actual page (a screenshot is often helpful, but not enough). Your site doesn't need to be live to share it with us, just set a public password in the visibility settings and then share this password and the URL of the site with us.

About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

Link to comment

Hi Paul, 

Thanks for your reply. This is the url: wombat-cello-g2mg.squarespace.com

I'm still using the domain Squarespace provided as my custom domain is still being used by my old website until I'm ready to transfer it over, so I hope this url works. 

The password is: coverculture

Thanks so much for taking a look into it and all your help!

Kylie

 

 

Link to comment
48 minutes ago, KylieSek said:

I'm still using the domain Squarespace provided...so I hope this url works.

Yes it works 🙂.

Try using this instead:

[data-section-id="619ce24f30fccf633e72c259"] .list-item-media-inner {
  filter: drop-shadow(2px 2px 5px #939799);
}

 

About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

Link to comment
On 11/30/2021 at 8:49 AM, KylieSek said:

Hi Paul,

 

Thanks for this. Unfortunately, it didn't work. It removed all the drop shadows. I've tried targeting with alt text and by file names but that's been unsuccessful too 😞

Which items you want to remove drop shadow?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 11/30/2021 at 1:49 AM, KylieSek said:

Unfortunately, it didn't work.

When you say it didn't work, can you explain? With this CSS, this is what I see...

1858338061_Screenshot2021-12-02at15_01_07.thumb.png.46f306f13601ff8744dfe43ef7d6c64c.png

Did you want something different?

About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

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.