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
  • Views 1.1k
  • 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.

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

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

 

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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?

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

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.