How make bigger my images on mobile?

[Avenueducadre]

Hi everyone,

I have one trouble.

I used multicolumn in my homepage to show before and after of my product, but, on mobile version, the images are very small…

Someone know how to change margin and make them bigger please ?

Thank you !

[Avenueducadre]

Oh sorry, there is image :

and the link of website : avenueducadre .fr/

[topnewyork]

Hello @Avenueducadre,

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media screen and (max-width: 749px) {
  .section-multicolumn .page-width {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

Thanks!

[Avenueducadre]

Hi Topnewyork,

I try to past in “Base.css” because I don’t have the other with the Refresh theme, but it’ doesn’t work…

[tim_tairli]

Do not edit your theme code.
You can go to “Customize”, navigate to this section settings and paste the following code into “Custom CSS” setting of this theme:

@media (max-width:1024px) {
  .multicolumn-card__image-wrapper {
    margin: 0 auto;
  }
}

==>

[Dan-From-Ryviu]

@Avenueducadre

avenueducadre .fr/

You can add this code to Custom CSS of that section

@media (max-width: 749px) {
.grid__item {
    width: 100%;
    max-width: calc(100% - var(--grid-mobile-horizontal-spacing) / 2);
}
}

Here is the result

Best regards,
Dan from Ryviu: Product Reviews App

[Avenueducadre]

Wow ! Thank you, it’s work (and much better now !)

[Avenueducadre]

Thank you very much ! This is working too

[AndyX]

Hi! To make the multicolumn images appear larger on mobile, you can use the “Custom CSS” field for that section instead of editing theme files. For example, you can add a media query to expand the image wrapper on small screens:

@media (max-width: 749px) {
  .multicolumn-card__image-wrapper {
    max-width: 100%;
    margin: 0 auto;
  }
}

This CSS tells the image wrapper to take up the full width of its column on devices narrower than 749 px and centers it with margin: 0 auto. You can adjust the break‑point or width values to suit your design.

To apply it, go to Online Store → Customize, open the multicolumn section settings and paste the snippet into the Custom CSS box. Save the changes and preview on your phone to make sure the images look the way you expect.