KylieSek Posted November 28, 2021 Share Posted November 28, 2021 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! Link to comment
paul2009 Posted November 28, 2021 Share Posted November 28, 2021 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. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
KylieSek Posted November 29, 2021 Author Share Posted November 29, 2021 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
paul2009 Posted November 29, 2021 Share Posted November 29, 2021 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. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
KylieSek Posted November 30, 2021 Author Share Posted November 30, 2021 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 😞 Link to comment
tuanphan Posted December 2, 2021 Share Posted December 2, 2021 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
paul2009 Posted December 2, 2021 Share Posted December 2, 2021 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? 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. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
derricksrandomviews Posted December 3, 2021 Share Posted December 3, 2021 try this code: .image-block { filter: drop-shadow(5px 5px 5px #666666); } Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment