Jump to content

Box shadow on only ONE image

Recommended Posts

Site URL: https://carrot-tortoise-9tyj.squarespace.com/

I want to apply a box shadow to the image in the row with the title "Main Areas of Expertise", but I can't seem to figure out how. I have tried using the code below, but it is still applying the box shadow to ALL images, instead of just the one. Any idea what I need to do? I've scoured the forum and haven't found an answer. I don't think you can see the site because it isn't live yet (not my decision) so I've attached an image so you can see what I'm trying to do, and another images showing the box shadow on images where I do NOT want it (the 3 columns.)  THANK YOU!

div#block-edb065db6191d80dc228 .sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-inset {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;


Screen Shot 2020-12-25 at 1.56.09 PM.png

Screen Shot 2020-12-25 at 1.56.16 PM.png

Link to comment

You won't need the CSS you posted.

In your Custom CSS you have the following rule-set.

.sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-inset {
    -moz-box-shadow: 180px 25px 0px 0px #426791 !important;
    -webkit-box-shadow: 180px 25px 0px 0px #426791 !important;
    box-shadow: 180px 0px 25px 0px 0px #426791 !important

That is causing all image blocks to get the box shadow.

Change it to the following.

#block-edb065db6191d80dc228.sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-inset {

  -moz-box-shadow: 180px 25px 0px 0px #426791;
  -webkit-box-shadow: 180px 25px 0px 0px #426791;
  box-shadow: 180px 0px 25px 0px 0px #426791;

Then only the first image you show will get the shadow.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

@jodybethw Your site has very long content on mobile. You can consider adding a back to top button.

On Tablet Overlay Menu, linkedin not align with top nav links - bottom button.

Add this to Design > Custom CSS

@media screen and (max-width:991px) and (min-width:768px) {
.header-menu-actions {
    padding-left: 3vw;


You haven't changed SEO Title so the browser tab still shows "Services 4"


Similar on this page "General 1" https://carrot-tortoise-9tyj.squarespace.com/speaking-and-consulting

and this "Services 1" https://carrot-tortoise-9tyj.squarespace.com/books

and this "about 1" https://carrot-tortoise-9tyj.squarespace.com/biocv

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

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.