Dawn Theme | Reduce Space Between Multicolumn

Solved
Ell_Soll
Pathfinder
91 0 23

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

Untitled.png

 

Accepted Solutions (7)
Made4uo-Ribe
Shopify Partner
4121 944 1151

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. 

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Made4uo-Ribe
Shopify Partner
4121 944 1151

This is an accepted solution.

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Made4uo-Ribe
Shopify Partner
4121 944 1151

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. 

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Made4uo-Ribe
Shopify Partner
4121 944 1151

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. 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Made4uo-Ribe
Shopify Partner
4121 944 1151

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. 

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Made4uo-Ribe
Shopify Partner
4121 944 1151

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Made4uo-Ribe
Shopify Partner
4121 944 1151

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!

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Replies 27 (27)
Made4uo-Ribe
Shopify Partner
4121 944 1151

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!

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Ell_Soll
Pathfinder
91 0 23

ellsoll.com

Made4uo-Ribe
Shopify Partner
4121 944 1151

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. 

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Ell_Soll
Pathfinder
91 0 23

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

Made4uo-Ribe
Shopify Partner
4121 944 1151

This is an accepted solution.

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Ell_Soll
Pathfinder
91 0 23

Yes!

Worked perfectly.

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

Made4uo-Ribe
Shopify Partner
4121 944 1151

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. 

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Ell_Soll
Pathfinder
91 0 23

Perfect.

Can we do it on mobile also?

Made4uo-Ribe
Shopify Partner
4121 944 1151

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. 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Ell_Soll
Pathfinder
91 0 23

Thank you very much!

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

Made4uo-Ribe
Shopify Partner
4121 944 1151

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.

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Ell_Soll
Pathfinder
91 0 23

Great but it only works on mobile.

How I make it on desktop too?

Made4uo-Ribe
Shopify Partner
4121 944 1151

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

 

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Ell_Soll
Pathfinder
91 0 23

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
4121 944 1151

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. 

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Ell_Soll
Pathfinder
91 0 23

Perfect!

Thanks a lot.

Made4uo-Ribe
Shopify Partner
4121 944 1151

Welcome. Happy to help. 😊

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Ell_Soll
Pathfinder
91 0 23

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
4121 944 1151

Which multicolumn? on in the homepage? This one?

Made4uoRibe_0-1698528334815.png

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Ell_Soll
Pathfinder
91 0 23

Yes

Made4uo-Ribe
Shopify Partner
4121 944 1151

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Ell_Soll
Pathfinder
91 0 23

You the best!

Ell_Soll
Pathfinder
91 0 23

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
91 0 23

Can you help please?

Made4uo-Ribe
Shopify Partner
4121 944 1151

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!

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


PageFly-Lucas
Pathfinder
110 28 27

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
91 0 23

Thanks but it's not working.