Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

CSS Box-Shadow for Card Images


Question

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 🙂

 

Screen Shot 2021-07-27 at 8.18.04 PM.png

Screen Shot 2021-07-27 at 8.18.40 PM.png

Link to comment

5 answers to this question

Recommended Posts

  • 0
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 🙂

 

Screen Shot 2021-07-27 at 8.18.04 PM.png

Screen Shot 2021-07-27 at 8.18.40 PM.png

Hi. Which page in screenshot?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
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.

Link to comment
  • 0

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

Edited by IgnitePerth

Contact Us for detailed help

Common Squarespace Tips

Sharing Your Site Link

Squarespace web designers in Perth WA.

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...