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.
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.
This is an accepted solution.
Oh okay, Try this one.
@media screen and (max-width: 749px){
ul#Slider-template--16099047669921__f10d39e7-da31-4822-82fe-dc796d74f3e8 {
padding: 0px !important;
}
}
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
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:
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
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:
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?
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.
Perfect!
Thanks a lot.
Welcome. Happy to help. 😊
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
Which multicolumn? on in the homepage? This one?
Yes
This is an accepted solution.
Oh okay, Try this one.
@media screen and (max-width: 749px){
ul#Slider-template--16099047669921__f10d39e7-da31-4822-82fe-dc796d74f3e8 {
padding: 0px !important;
}
}
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
You the best!
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
Can you help please?
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:
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
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
Thanks but it's not working.
User | RANK |
---|---|
220 | |
164 | |
65 | |
54 | |
53 |
On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...
By Skye Nov 8, 2023The year-end shopping season is just around the corner. Is a flash sale on your radar? Are...
By Jasonh Nov 6, 2023