How make bigger my images on mobile?

Store Design
, ,

Topic summary

A user is experiencing an issue where before-and-after product images displayed in a multicolumn section appear too small on mobile devices. An accompanying screenshot demonstrates the problem.

Solutions Provided:

Multiple CSS-based fixes were offered, all targeting mobile responsiveness:

  • Recommended approach: Add custom CSS directly to the section’s “Custom CSS” field in the theme customizer (rather than editing theme files)
  • Working solutions: Two CSS snippets successfully resolved the issue by removing padding constraints and adjusting image wrapper widths to utilize full available space on screens under 749-1024px
  • Key CSS properties: Solutions focused on setting max-width: 100%, removing horizontal padding, and centering images with margin: 0 auto

Outcome:

The user confirmed that multiple suggested solutions worked, with images now displaying larger and better formatted on mobile devices. The discussion emphasizes using the theme customizer’s Custom CSS feature over direct code editing for maintainability.

Summarized with AI on October 23. AI used: claude-sonnet-4-5-20250929.
1

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 !

1 Like
2

Oh sorry, there is image :

IMG_1580.PNG
IMG_1580.PNG1179×2556 220 KB

and the link of website : avenueducadre .fr/

3

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!

4

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…

5

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

Screenshot 2025-10-23 at 1.39.54 PM
Screenshot 2025-10-23 at 1.39.54 PM404×856 55.6 KB
==>
Screenshot 2025-10-23 at 1.39.59 PM
Screenshot 2025-10-23 at 1.39.59 PM404×856 78.9 KB

1 Like
6

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

Screenshot 2025-10-23 at 10.16.52
Screenshot 2025-10-23 at 10.16.521180×1794 184 KB

Best regards,
Dan from Ryviu: Product Reviews App

1 Like
7

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

1 Like
8

Thank you very much ! This is working too :clap:t3:

9

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.