Shopify themes, liquid, logos, and UX
Hi, is there any way to reduce the space between the images in multicolumn?
Solved! Go to the solution
This is an accepted solution.
Thank you for the information.
Try this one.
.multicolumn-card__image-wrapper.multicolumn-card__image-wrapper--full-width.multicolumn-card-spacing {
margin: 0px;
}
Result:
I hope it help.
This is an accepted solution.
Oh, You can try in the section-multicolumn.css file.
This is an 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.
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:
Paste in on the section-multicolumn.css file.
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!
ellsoll.com
This is an accepted solution.
Thank you for the information.
Try this one.
.multicolumn-card__image-wrapper.multicolumn-card__image-wrapper--full-width.multicolumn-card-spacing {
margin: 0px;
}
Result:
I hope it help.
I tried to put it in "base" and "theme" and it's not work.
This is an accepted solution.
Oh, You can try in the section-multicolumn.css file.
Yes!
Worked perfectly.
How I can also reduce the sides margin? Make the images fit the page width.
This is an 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.
Perfect.
Can we do it on mobile also?
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:
Paste in on the section-multicolumn.css file.
Thank you very much!
Last thing, any way to reduce top padding of the section?
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.
Great but it only works on mobile.
How I make it on desktop too?
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:
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.
Thanks but it's not working.
User | RANK |
---|---|
76 | |
65 | |
64 | |
53 | |
49 |
We're excited to announce improvements to the threaded messaging experience in our communi...
By TyW May 31, 2023Thank you to everyone who participated in our AMA with Klaviyo. It was great to see so man...
By Jacqui May 30, 2023Photo by Marco Verch Sales channels on Shopify are various platforms where you can sell...
By Ollie May 25, 2023