Make multi row picture independent from the text

Topic summary

A user encountered an issue where images in a multi-row picture section were zooming/cropping instead of displaying fully. The images were using object-fit properties that caused unwanted cropping.

Solutions provided:

  • Add CSS code object-fit: contain; to the .image-with-text__media > img selector in base.css or section file
  • This changes the image scaling behavior to show the complete image without cropping

Additional fix:

  • User also requested removal of spacing between elements in mobile view
  • Solution: Add padding-bottom: 0 !important; to .image-with-text__media class

Status: Resolved. The user confirmed both solutions worked successfully.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.

Hello,

Is there a code for making the multi row independent from the text, as u can see on this photo it is zooming in on the picture.

Code for my site: ponyplay

I want it to be like this site: https://vsai.store/pages/v03-52-hertz-whale

My site: https://vsai.store/pages/v01-yellowstone

Dear regards,

Rasmus

Hello @RasmusUG , Please add the code below to your base.css file, or can add it to your section file css.

.image-with-text__media > img {
    object-fit: contain;
}

See the output below.

Feel free to reach out if you have any questions or need assistance.

Best Regards,

Darshan.

Hello,

I am San from MS Web Designer.

Please find the solution:

Go to Themes > Edit code > Theme.liquid > at the bottom place this code before


Do let me know in case of any concerns.

Regards,

San

Do u have a code for deleting the spacing between this In mobil view?

@RasmusUG , Add the CSS below.

.image-with-text__media {
    padding-bottom: 0 !important;
}

If I managed to help you then, don’t forget to Like it and Mark it as a Solution!
Feel free to reach out if you have any questions or need assistance.

Thanks.

TY!! Working!

Have a good day!