Issue: Images in the Multirow section were cropping on responsive screens, likely due to how the media is positioned within the block. The goal is to make images fit their cells without being cropped.
Proposed fix (CSS changes in theme’s base.css):
Outcome so far: The original poster confirmed the fix stopped the cropping. No further issues reported by them.
New development: Another user applied the same CSS and images no longer crop, but large blank gaps appeared below each row. They provided before/after screenshots illustrating the spacing issue.
Next steps / status: The helper requested the store URL from the second user to investigate the spacing problem further. No resolution yet for the gap issue; the thread remains open.
Notes: The code snippet and the attached screenshots are central to understanding both the fix and the new spacing side effect.
This is my page > https://www.futurisnowshop.com/pages/news
the images are embedded in the background of the cell it seems… so when the screen is resized, the table is responsive but my images are all cropped… is there a way to fit to size in the cell of the table so the image is not cropped out?
Hi @Futurisnow ,
May I suggest to update code these steps:
.multirow__inner .image-with-text__media {
height: auto!important;
}
.multirow__inner .image-with-text__media img {
position: static!important;
}
Thank you so much!!
Hi,
Please can you help me. I am having a similar issue and your solution partly works. By applying the suggested code my images no longer crop, by I now have huge blank gaps under each row (see screen shots - before and after base.css amends). How can I reduce these gaps?
Many Thanks
Hi @bjohns ,
Could you share your Url store? I will help to take a look it.
