CSS Box-Shadow for Card Images

Site URL: https://plat4m.squarespace.com/

I am struggling to get some custom code working that creates a drop shadow on Card layout images.

I had to apply the css to the .intrinsic class otherwise it seems to be cut off. The problem is on Tablet view and some smaller laptop sizes it doesn't remain the same size as the image and doesn't work.

I have attached screens to demonstrate. I need to somehow get the box-shadow working on the img tag if possible.

The CSS is below:

.image-block-outer-wrapper.design-layout-card .intrinsic {
    box-shadow: 0px 20px 20px 0px rgba(15,35,98,0.75)!important;
  border-radius: 3px!important;
}

Site can be viewed here:

https://plat4m.squarespace.com/

Any advice would be much appreciated 🙂

4 hours ago, Brent_Dickens said:

Site URL: https://plat4m.squarespace.com/

I am struggling to get some custom code working that creates a drop shadow on Card layout images.

I had to apply the css to the .intrinsic class otherwise it seems to be cut off. The problem is on Tablet view and some smaller laptop sizes it doesn't remain the same size as the image and doesn't work.

I have attached screens to demonstrate. I need to somehow get the box-shadow working on the img tag if possible.

The CSS is below:

.image-block-outer-wrapper.design-layout-card .intrinsic {
    box-shadow: 0px 20px 20px 0px rgba(15,35,98,0.75)!important;
  border-radius: 3px!important;
}

Site can be viewed here:

https://plat4m.squarespace.com/

 

Any advice would be much appreciated 🙂

 

Hi. Which page in screenshot?

10 hours ago, tuanphan said:

Hi. Which page in screenshot?

Our Services

On 7/28/2021 at 6:06 AM, Brent_Dickens said:

Our Services

Use this code

.design-layout-card .intrinsic {
    box-shadow: 0px 20px 20px 0px rgba(15,35,98,0.75)!important;
    border-radius: 3px!important;
}

9 minutes ago, tuanphan said:

Use this code

.design-layout-card .intrinsic {
    box-shadow: 0px 20px 20px 0px rgba(15,35,98,0.75)!important;
    border-radius: 3px!important;
}

 

Applying the bob-shadow to the .intrinsic class is the issue as this is not always the same size as the image on those tablet sized screens.

Trixy one!  intrinsic is the class you need - to solve the sizing add img:

Calling the img tag inside intrinsic solves your problem on the home page, but not Our Services. 

.intrinsic img{
  box-shadow: 0px 20px 20px 0px rgba(15,35,98,0.75);
}

Tuanphan's code is the right selector for Our Services