Image block: card - Code to add a drop shadow? (wells template)

(wells template)

I have an image block: card on my page, and I'd like to have a drop shadow around the card. Does anyone know some css for this?

Thanks much!

@jpwelchux if you share url i can take a look.

@tuanphan Thank you! You'll see all of the image cards have a slight gray background. I'd like to give that edge a soft modern drop shadow. 

https://oboe-oarfish-b2zr.squarespace.com 

turkeydogs

@tuanphan this is awesome thank you so much! I've tweaked the shadow and it's looking good. 

One more question. It looks like the shadow applies to all images. Any idea if just the image cards can have the shadow?

@jpwelchux remove above and use this

.image-block-outer-wrapper.design-layout-card {
    box-shadow: -1px 2px 10px 4px rgba(0,0,0,.07);
}

3 minutes ago, tuanphan said:

@jpwelchux remove above and use this

.image-block-outer-wrapper.design-layout-card {
    box-shadow: -1px 2px 10px 4px rgba(0,0,0,.07);
}

 

This is it! Thank you so much @tuanphan!

@tuanphan This also worked for me thank you! Anyway of having it only apply to certain pages? Thank you for your time!

8 minutes ago, rod said:

@tuanphan This also worked for me thank you! Anyway of having it only apply to certain pages? Thank you for your time!

Edit Page > Add Code Block > insert code

<style>
  .image-block-outer-wrapper.design-layout-card {
    box-shadow: -1px 2px 10px 4px rgba(0,0,0,.07);
}
</style>

@tuanphan thanks for the reply! In 7.1 would I add code block to each section of a page? I tried that but it didn't seem to work. I appreciate any suggestions you have?

8 minutes ago, rod said:

@tuanphan thanks for the reply! In 7.1 would I add code block to each section of a page? I tried that but it didn't seem to work. I appreciate any suggestions you have?

or add style above code to Page Header

Hey guys, I have this code to add a drop shadow under most of the button but it doesn't apply to the card blocks.

.sqs-block-button-element {
-webkit-box-shadow: 0px 9px 14px -5px rgba(0,0,0,0.87); 
box-shadow: 0px 9px 14px -5px rgba(0,0,0,0.50);
}

Does anyone have any ideas on how to apply it to the card block please?

16 hours ago, Jeremyn said:

Hey guys, I have this code to add a drop shadow under most of the button but it doesn't apply to the card blocks.

 

.sqs-block-button-element {
-webkit-box-shadow: 0px 9px 14px -5px rgba(0,0,0,0.87); 
box-shadow: 0px 9px 14px -5px rgba(0,0,0,0.50);
}

 

 

Does anyone have any ideas on how to apply it to the card block please?

Can you share link to page where you use card blocks? Also you want to add shadow to card block button or card block?

Hey Tuan,

Here is the home page https://www.creativeportrait.net.au/

And there is 2 cards block button at the bottom of the page.

I am looking to add a card block button shadow across entire the website.

Cheers 🙂

21 hours ago, Jeremyn said:

Hey Tuan,

 

Here is the home page https://www.creativeportrait.net.au/

And there is 2 cards block button at the bottom of the page.

 

I am looking to add a card block button shadow across entire the website.

 

Cheers 🙂

Hi. You mean Get Started & Download My Product Guide buttons?

Yes that's right. It would be amazing to have a code that apply it to every card block across the website.

Otherwise just the 2 buttons mentioned is fine.

Thank you very much Tuan

On 7/23/2021 at 4:57 PM, Jeremyn said:

Yes that's right. It would be amazing to have a code that apply it to every card block across the website.

 

Otherwise just the 2 buttons mentioned is fine.

 

Thank you very much Tuan

Add to Design > Custom CSS

/* card image button shadow */
figure.design-layout-card .image-button a {
    box-shadow: -1px 2px 10px 4px rgb(0 0 0 / 70%) !important;
}

Hey Tuan,

Thank you for spending the time to go over the pages and pointing out some issues that I didn't even noticed.

It would amazing if you could let me know how to add the image to the pop up. Squarespace get rid of it automatically on mobile.

Also I add the code that you send but I have an error: 

On 7/25/2021 at 7:03 PM, Jeremyn said:

Hey Tuan,

 

Thank you for spending the time to go over the pages and pointing out some issues that I didn't even noticed.

It would amazing if you could let me know how to add the image to the pop up. Squarespace get rid of it automatically on mobile.

Also I add the code that you send but I have an error: 

error evaluating function `rgb`: color functions take numbers as parameters

ah, add this new code

/* card image button shadow */
figure.design-layout-card .image-button a {
    box-shadow: -1px 2px 10px 4px rgb(0,0,0,0.7) !important;
}

Which popup? Can you take a screenshot?

Hey Tuan, last code to add a shadow to a card block works perfectly, thank you very much.

As the text on the promotional pop up was too long, I needed to scroll to see the button. See photo attached. I was wondering if there is a code to extend the pop up window to see all the text and button but I just shorten the text and it is fine now.

On 7/30/2021 at 6:35 PM, Jeremyn said:

Hey Tuan, last code to add a shadow to a card block works perfectly, thank you very much.

 

As the text on the promotional pop up was too long, I needed to scroll to see the button. See photo attached. I was wondering if there is a code to extend the pop up window to see all the text and button but I just shorten the text and it is fine now.

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.sqs-popup-overlay {
    height: 80vh !important;
}
}

On 10/15/2019 at 4:01 AM, tuanphan said:

@jpwelchux Add to Home > Design > Custom CSS

.image-block-outer-wrapper {
    box-shadow: 1px 2px 3px 4px rgba(0,0,0,0.5);
}

Explain

• 1px: The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box
• 2px: The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box
• 3px: The blur radius. The higher the number, the more blurred the shadow will be
• 4px: The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow
• rgba(0,0,0,0.5)  The color of the shadow, you can use code (#000) or name (black) or rgb (rgb(0,0,0)) or rgba.

Hi there, can you help me with this? I want the drop shadow to be top and bottom. 

19 hours ago, pexeldio said:

Hi there, can you help me with this? I want the drop shadow to be top and bottom. 

What is page url? We can check easier