Dawn Theme | Reduce Space Between Multicolumn

[Ell_Soll]

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

[Made4uo-Ribe · 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. 

[Made4uo-Ribe · Accepted solution]

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

[Made4uo-Ribe · 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. 

[Made4uo-Ribe · 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. 

[Made4uo-Ribe · Accepted solution]

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. 

[Made4uo-Ribe · Accepted solution]

Oh okay, Try this one. 

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• In the "Assets" folder, click on "base.css, style.css or theme.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:

@media screen and (max-width: 749px){
ul#Slider-template--16099047669921__f10d39e7-da31-4822-82fe-dc796d74f3e8 {
    padding: 0px !important;
}
}

• And Save. 
• Result:
• 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[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]

ellsoll.com

[Made4uo-Ribe · 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.

[Made4uo-Ribe · 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.

[Made4uo-Ribe · 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?

[Made4uo-Ribe · 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?

[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 · Accepted solution]

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

[Ell_Soll]

Hi, how are you?

can you help me again please?

The multicolumn is not full width on mobile. on desktop it's perfect.

You always helped me so I hope you will help me again.

ellsoll.com

[Made4uo-Ribe]

Which multicolumn? on in the homepage? This one?

[Ell_Soll]

Yes

[Made4uo-Ribe · Accepted solution]

Oh okay, Try this one. 

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• In the "Assets" folder, click on "base.css, style.css or theme.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:

@media screen and (max-width: 749px){
ul#Slider-template--16099047669921__f10d39e7-da31-4822-82fe-dc796d74f3e8 {
    padding: 0px !important;
}
}

• And Save. 
• Result:
• 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Ell_Soll]

You the best!

[Ell_Soll]

Hi my friend!

Very sorry for making you crazy.

Just updated the theme, can you help me with the mobile width?

I need it to be full width on mobile.

ellsoll.com

[Ell_Soll]

Can you help please?

[Made4uo-Ribe · Accepted solution]

Sorry, Late reply. You like to full width the multicolumn in mobile right?

Check this one. 

Same instruction. 

@media screen and (max-width: 749px){
.multicolumn-list:not(.slider) {
    padding: 0px !important;
}
}

And Save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

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