Refresh theme: remove shadow around multi column cards

[CED9]

Hello everyone,

How can I remove this shadow thingy around the multicolumn cards?

Thanks!!

[Huptech-Web]

Hey @CED9 Could you please share the store URL? This will allow me to inspect it and provide you with a more tailored solution.

[niraj_patel]

Hello @CED9

would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.

[Moeed]

Hey @CED9

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[Sweans]

Hi @CED9 ,

Please provide store link and password so we can check and provide a better solution.

Reagrds,
Sweans

[CED9]

Hello, sure: https://nolookbox.com/

[Moeed]

Hey @CED9

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 tag

RESULT:

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

Best Regards,
Moeed

[niraj_patel]

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

.content-container:after{ box-shadow: unset !important; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Huptech-Web]

Hello! @CED9 Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on “Themes”
3. Select “Edit code”
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can’t find your custom CSS file, open “base.css”
6. Add the following code at the end of the file.

body .multicolumn-card:after {
   box-shadow: unset !important;
}

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.

[CED9]

Do you maybe know how to make those spaces smaller as well?

[Huptech-Web]

Hello! @CED9 Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on “Themes”
3. Select “Edit code”
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can’t find your custom CSS file, open “base.css”
6. Add the following code at the end of the file.

.multicolumn-list.slider {
     gap: 0;
     justify-content: center;
     margin: 0 auto;
}
@media screen and (min-width: 990px) {
    .grid--4-col-desktop .grid__item {
        width: calc(20% - var(--grid-desktop-horizontal-spacing)* 3 / 4);
        max-width: calc(20% - var(--grid-desktop-horizontal-spacing)* 3 / 4);
    }
}

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.

Thank you
K.K

[CED9]

I wanted to make this card smaller but make the image size bigger. Also to make space between image and link smaller:

Thank you! You are being very helpful

[niraj_patel]

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

.multicolumn-card__image-wrapper--half-width{ width: 79% !important; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.