Dawn Theme | Reduce Space Between Multicolumn

[Ell_Soll]

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

[Ribe_Dagandara · Accepted solution]

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. 

[Ribe_Dagandara · Accepted solution]

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

[Ribe_Dagandara · Accepted solution]

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. 

[Ribe_Dagandara]

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]

ellsoll.com

[Ribe_Dagandara · Accepted solution]

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.

[Ribe_Dagandara · Accepted solution]

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.

[Ribe_Dagandara · Accepted solution]

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?

[Ribe_Dagandara · Accepted solution]

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?

[Ribe_Dagandara]

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?

[Ribe_Dagandara]

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:

[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

[Ell_Soll]

Thanks but it's not working.