Dawn Theme | Reduce Space Between Multicolumn

[Ell_Soll]

Hi, is there any way to reduce the space between the images in multicolumn?

[Made4uo-Ribe]

Hi @Ell_Soll ,

In order to obtain that you need to remove the margin or padding between them.

If you dont mind to share your URL website and with password? So I can give you specific codes to change. Thanks!

[Ell_Soll]

Ell Soll Fashion | Stylish Fashion

[PageFly-Lucas]

Hi @Ell_Soll

This is Lucas from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

.background-none .multicolumn-card__image-wrapper {

margin-left: 10px !important;

margin-right: 10px !important;

}

Hope that my solution works for you.

Best regards,

Lucas| PageFly

[Made4uo-Ribe]

Thank you for the information.

Try this one.

1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
3. In the “Assets” folder, click on “theme.scss.liquid, styles.scss.liquid or base.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
4. And Save.

.multicolumn-card__image-wrapper.multicolumn-card__image-wrapper--full-width.multicolumn-card-spacing {
    margin: 0px;
}

Result:

I hope it help.

[Ell_Soll]

I tried to put it in “base” and “theme” and it’s not work.

[Ell_Soll]

Thanks but it’s not working.

[Made4uo-Ribe]

Oh, You can try in the section-multicolumn.css file.

[Ell_Soll]

Yes!

Worked perfectly.

How I can also reduce the sides margin? Make the images fit the page width.

[Made4uo-Ribe]

Try this one. Paste on the base.css file.

.multicolumn.background-none.no-heading .page-width {
    padding: 0px;
}

Result:

You can adjust anytime the size.

[Ell_Soll]

Perfect.

Can we do it on mobile also?

[Made4uo-Ribe]

Yes, It can.

@media screen and (max-width: 749px){
ul#Slider-template--16060030189729__7c563960-ced7-41a8-b7e2-6c6be438f869 {
    padding: 0px;
}
}

Result:

Paste in on the section-multicolumn.css file.

[Ell_Soll]

Thank you very much!

Last thing, any way to reduce top padding of the section?

[Made4uo-Ribe]

Welcome! Happy to help.

This is to reduce the top padding.

@media screen and (max-width: 749px){
.title-wrapper-with-link.title-wrapper--self-padded-mobile.title-wrapper-with-link--no-heading {
    margin: 5px;
}

Result:

You can adjust the size what ever you want.

Paste in the section-multicolumn.css file.

[Ell_Soll]

Great but it only works on mobile.

How I make it on desktop too?

[Made4uo-Ribe]

Oh, i thought you only just want for mobile. you can ignore the mobile with the @media. just go with this code. because it will apply to same all size.

.title-wrapper-with-link.title-wrapper--self-padded-mobile.title-wrapper-with-link--no-heading {
    margin: 5px;
}

Result:

[Ell_Soll]

All perfect but now I updated my theme and the images perfect on Desktop with these codes but on Mobile they are not Full width.

Can you help?

[Made4uo-Ribe]

Hi @Ell_Soll ,

You can try this one.

@media only screen and (max-width: 749px){
section#shopify-section-template--16099047669921__7c563960-ced7-41a8-b7e2-6c6be438f869 ul#Slider-template--16099047669921__7c563960-ced7-41a8-b7e2-6c6be438f869 {
    padding: 0px;
}
}

I hope it works.

[Ell_Soll]

Perfect!

Thanks a lot.

[Made4uo-Ribe]

Welcome. Happy to help.