Solved

Dawn Theme | Reduce Space Between Multicolumn

Ell_Soll
Pathfinder
99 0 26

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

Untitled.png

 

Accepted Solutions (7)
Made4uo-Ribe
Shopify Partner
6407 1538 1908

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. 

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.

View solution in original post

Made4uo-Ribe
Shopify Partner
6407 1538 1908

This is an accepted solution.

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.

View solution in original post

Made4uo-Ribe
Shopify Partner
6407 1538 1908

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. 

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.

View solution in original post

Made4uo-Ribe
Shopify Partner
6407 1538 1908

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. 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.

View solution in original post

Made4uo-Ribe
Shopify Partner
6407 1538 1908

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

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.

View solution in original post

Made4uo-Ribe
Shopify Partner
6407 1538 1908

This is an 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:
  • Made4uoRibe_0-1698607835441.png

     

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.

View solution in original post

Made4uo-Ribe
Shopify Partner
6407 1538 1908

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

Made4uoRibe_0-1699026619533.png

 

 

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

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.

View solution in original post

Replies 27 (27)

Made4uo-Ribe
Shopify Partner
6407 1538 1908

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!

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Ell_Soll
Pathfinder
99 0 26

ellsoll.com

Made4uo-Ribe
Shopify Partner
6407 1538 1908

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. 

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Ell_Soll
Pathfinder
99 0 26

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

Made4uo-Ribe
Shopify Partner
6407 1538 1908

This is an accepted solution.

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Ell_Soll
Pathfinder
99 0 26

Yes!

Worked perfectly.

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

Made4uo-Ribe
Shopify Partner
6407 1538 1908

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. 

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Ell_Soll
Pathfinder
99 0 26

Perfect.

Can we do it on mobile also?

Made4uo-Ribe
Shopify Partner
6407 1538 1908

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. 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Ell_Soll
Pathfinder
99 0 26

Thank you very much!

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

Made4uo-Ribe
Shopify Partner
6407 1538 1908

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.

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Ell_Soll
Pathfinder
99 0 26

Great but it only works on mobile.

How I make it on desktop too?

Made4uo-Ribe
Shopify Partner
6407 1538 1908

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

 

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Ell_Soll
Pathfinder
99 0 26

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
Shopify Partner
6407 1538 1908

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

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Ell_Soll
Pathfinder
99 0 26

Perfect!

Thanks a lot.

Made4uo-Ribe
Shopify Partner
6407 1538 1908

Welcome. Happy to help. 😊

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Ell_Soll
Pathfinder
99 0 26

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
Shopify Partner
6407 1538 1908

Which multicolumn? on in the homepage? This one?

Made4uoRibe_0-1698528334815.png

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Ell_Soll
Pathfinder
99 0 26

Yes

Made4uo-Ribe
Shopify Partner
6407 1538 1908

This is an 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:
  • Made4uoRibe_0-1698607835441.png

     

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Ell_Soll
Pathfinder
99 0 26

You the best!

Ell_Soll
Pathfinder
99 0 26

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
Pathfinder
99 0 26

Can you help please?

Made4uo-Ribe
Shopify Partner
6407 1538 1908

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

Made4uoRibe_0-1699026619533.png

 

 

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

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.

PageFly-Lucas
Pathfinder
110 28 29

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

banned
Ell_Soll
Pathfinder
99 0 26

Thanks but it's not working.