Dawn Theme | Reduce Space Between Multicolumn

Solved
Ell_Soll
Explorer
63 0 13

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

Untitled.png

 

Accepted Solutions (4)
Ribe_Dagandara
Shopify Partner
297 48 49

This is an 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:

Rose_Dim_0-1685098235266.png

I hope it help. 

 

We are volunteering to help | Likes and Accept as Solution will be much appreciated.✌
Need a Shopify developer? Hire us at Made4Uo's website.

View solution in original post

Ribe_Dagandara
Shopify Partner
297 48 49

This is an accepted solution.

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

We are volunteering to help | Likes and Accept as Solution will be much appreciated.✌
Need a Shopify developer? Hire us at Made4Uo's website.

View solution in original post

Ribe_Dagandara
Shopify Partner
297 48 49

This is an accepted solution.

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

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

Result:

Rose_Dim_0-1685099284805.png

You can adjust anytime the size. 

 

We are volunteering to help | Likes and Accept as Solution will be much appreciated.✌
Need a Shopify developer? Hire us at Made4Uo's website.

View solution in original post

Ribe_Dagandara
Shopify Partner
297 48 49

This is an accepted solution.

Yes, It can. 

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

Result:

Rose_Dim_0-1685099933775.png

Paste in on the section-multicolumn.css file. 

We are volunteering to help | Likes and Accept as Solution will be much appreciated.✌
Need a Shopify developer? Hire us at Made4Uo's website.

View solution in original post

Replies 15 (15)
Ribe_Dagandara
Shopify Partner
297 48 49

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!

 

We are volunteering to help | Likes and Accept as Solution will be much appreciated.✌
Need a Shopify developer? Hire us at Made4Uo's website.

Ell_Soll
Explorer
63 0 13

ellsoll.com

Ribe_Dagandara
Shopify Partner
297 48 49

This is an 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:

Rose_Dim_0-1685098235266.png

I hope it help. 

 

We are volunteering to help | Likes and Accept as Solution will be much appreciated.✌
Need a Shopify developer? Hire us at Made4Uo's website.

Ell_Soll
Explorer
63 0 13

I tried to put it in "base" and "theme" and it's not work.

Ribe_Dagandara
Shopify Partner
297 48 49

This is an accepted solution.

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

We are volunteering to help | Likes and Accept as Solution will be much appreciated.✌
Need a Shopify developer? Hire us at Made4Uo's website.

Ell_Soll
Explorer
63 0 13

Yes!

Worked perfectly.

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

Ribe_Dagandara
Shopify Partner
297 48 49

This is an accepted solution.

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

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

Result:

Rose_Dim_0-1685099284805.png

You can adjust anytime the size. 

 

We are volunteering to help | Likes and Accept as Solution will be much appreciated.✌
Need a Shopify developer? Hire us at Made4Uo's website.

Ell_Soll
Explorer
63 0 13

Perfect.

Can we do it on mobile also?

Ribe_Dagandara
Shopify Partner
297 48 49

This is an accepted solution.

Yes, It can. 

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

Result:

Rose_Dim_0-1685099933775.png

Paste in on the section-multicolumn.css file. 

We are volunteering to help | Likes and Accept as Solution will be much appreciated.✌
Need a Shopify developer? Hire us at Made4Uo's website.

Ell_Soll
Explorer
63 0 13

Thank you very much!

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

Ribe_Dagandara
Shopify Partner
297 48 49

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: 

Rose_Dim_0-1685100924165.png

You can adjust the size what ever you want. 

Paste in the section-multicolumn.css file.

We are volunteering to help | Likes and Accept as Solution will be much appreciated.✌
Need a Shopify developer? Hire us at Made4Uo's website.

Ell_Soll
Explorer
63 0 13

Great but it only works on mobile.

How I make it on desktop too?

Ribe_Dagandara
Shopify Partner
297 48 49

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:

Rose_Dim_0-1685106759142.png

 

 

We are volunteering to help | Likes and Accept as Solution will be much appreciated.✌
Need a Shopify developer? Hire us at Made4Uo's website.

PageFly-Lucas
Tourist
86 24 21

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

Ell_Soll
Explorer
63 0 13

Thanks but it's not working.