(Dawn Theme) How to make multicolumn images smaller for mobile

[IllIlIl1]

How to make multicolumn images smaller for mobile only? Without container overflow when scrolling

Store link- https://b01a38-40.myshopify.com/

Code- dapolu

[Dan-From-Ryviu]

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; }
}

 

[IllIlIl1]

I added it but the images didn't change.

[Sweans]

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

[GTLOfficial]

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

[BSS-TekLabs]

- 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 </head> and press 'Save' to save it.

 

<style>
@media only screen and (max-width: 600px) {
.multicolumn-card__image-wrapper {
    max-width: 120px !important;
    margin: auto !important;
}
}
</style>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.