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

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!

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.

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

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);
}

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 😞

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?

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

Did you want something different?

try this code:

.image-block {
  filter: drop-shadow(5px 5px 5px #666666);
}