Trying to place my Lift Shadow behind my Multicolumn Images with Rounded Corners

Solved

Trying to place my Lift Shadow behind my Multicolumn Images with Rounded Corners

hellodarkling
Tourist
33 1 12

This is probably a case where a picture makes more sense than descriptions alone, so to start off with: 

hellodarkling_0-1741532081266.png

As you might notice in the picture, the Lift Shadow is now working (that was a chore all by itself) and I got my Rounded Corners, so that's great. However the Shadow doesn't actually fall behind the images, it's sort of next to them, leaving ugly little white corners in both right-side corners. I'm hoping someone might be able to help me fill in this gap. Any assistance is greatly appreciated. 
Here is the code I am using so far
/* MULTICOLUMN */
/* Rounded Corners */
.multicolumn-card .media>img {border-radius: 10px;}
/* Lift Shadow */
.multicolumn-card__image-wrapper.multicolumn-card__image-wrapper--full-width.multicolumn-card-spacing {
box-shadow: 3px 3px 5px #adadad; /* set your values */}

Theme: Dawn
Site: https://darklingnails.com/
Password: darkling

Trying to create a website with zero idea of what I'm doing. It's mostly just trial and error and a lot of tutorials right now.
Accepted Solution (1)
Moeed
Shopify Partner
7019 1892 2311

This is an accepted solution.

Hey @hellodarkling 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.multicolumn-card-spacing {
    border-radius: 10px !important;
    margin: 0 !important;
}
</style>

RESULT:

Moeed_0-1741540035946.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

Replies 6 (6)

ShishirHelps
Shopify Partner
82 3 5

Hi @hellodarkling 
Do you want like this? Please let me know. If the problem is not solved yet. You can add me as a collaborator, I will fix it from your dashboard. 

ShishirHelps_0-1741534383202.png

 

ShishirHelps_0-1741534127780.png

 

- I'm Shishir Hasan a Shopify Store Designer | CRO specialist.

- Need my help?

+8801762785429 (WhatsApp) || Work with Upwork


- If this solves the problem, please don't forget to Mark it as Solution!
hellodarkling
Tourist
33 1 12

Thank you very much, but I am really looking to keep the shadow to the right and bottom, to match the shadows on my Featured Collection items. 

Trying to create a website with zero idea of what I'm doing. It's mostly just trial and error and a lot of tutorials right now.
hellodarkling
Tourist
33 1 12

That being said, if I could please know how you adjusted the spacing between the columns, that's another stumbling block I've been struggling with. 

 

Trying to create a website with zero idea of what I'm doing. It's mostly just trial and error and a lot of tutorials right now.
Moeed
Shopify Partner
7019 1892 2311

This is an accepted solution.

Hey @hellodarkling 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.multicolumn-card-spacing {
    border-radius: 10px !important;
    margin: 0 !important;
}
</style>

RESULT:

Moeed_0-1741540035946.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


hellodarkling
Tourist
33 1 12

Perfect! Thank you so much @Moeed ❤️

Trying to create a website with zero idea of what I'm doing. It's mostly just trial and error and a lot of tutorials right now.
Moeed
Shopify Partner
7019 1892 2311

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications