How to make multicolumn images smaller for mobile only? Without container overflow when scrolling
Store link- https://b01a38-40.myshopify.com/
Code- dapolu
1 Like
Hi @IllIlIl1
Please add this code to Custom CSS of that section
@media (min-width: 749px) {
.multicolumn-card__image-wrapper { max-with: 100px; margin: 0 auto !important; }
}
I added it but the images didn’t change.
Hi @IllIlIl1 ,
to make multicolumn images smaller for mobile, follow these steps:
1.Go to your Shopify admin panel.
2.Navigate to Online Store > Themes.
3.Find your theme and click on Customize.
4.Click Actions > Edit code.
5.In the left sidebar, under the Layout directory, select base.css.
@media screen and (min-width: 750px) and (max-width: 989px) {
.slider--tablet.grid--peek.grid--2-col-tablet .grid__item, .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item {
width: calc(21% - var(--grid-desktop-horizontal-spacing) - 3rem) !important;//adjust width as your requirement
}
}
@media screen and (max-width: 989px) {
.slider.slider--tablet {
overflow: auto !important;
}
}
then save your changes
Result:-
I hope this helps! If it does, please like it and mark it as a solution!
If you need further assistance, feel free to reach out!
Regards,
Sweans
Hello @IllIlIl1
Go to online store ----> themes ----> actions ----> edit code ---->assets ----> section-multicolumn.css ----> line number 90
search this code
.multicolumn-card-spacing {
padding-top: 2.5rem;
margin-left: 2.5rem;
margin-right: 2.5rem;
}
and replace with this code
.multicolumn-card-spacing {
margin-left: 4.5rem;
margin-right: 0.5rem;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
- Here is the solution for you @IllIlIl1
- Please follow these steps:
- Then find the theme.liquid file.
- Then add the following code at the before tag and press ‘Save’ to save it.
- Here is the result you will achieve:
- Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.