Image don't resize well on mobile and tablet

Topic summary

A Shopify store owner reports that images on their website display incorrectly on mobile and tablet devices, showing only the center portion instead of the full image.

Specific Issue:

  • Desktop displays images properly
  • Mobile/tablet crops images to center section only
  • Example: “warm roofs” section image gets cut off

Diagnosis:

  • A responder identified that the uploaded images themselves may be causing the cropping issue on mobile devices

Proposed Solution:

  • Creating a custom section using Liquid code (Shopify’s templating language) to match the intended design and ensure proper responsive image display across all devices

The discussion remains open with the store owner seeking guidance on implementing the fix.

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

Hi, I have noticed after putting my website live and trying it on different devices, sometimes the images are only showing the centre sections and not the whole thing.

For example of the warm roofs section…

It just shows this when on desktop it comes out like this…

Just wondering if there was a way to get this sorted so it looks ok at all angles and sizes depending on the device.

Website Link: https://morgansdoorsandwindows.com/pages/warm-roofs

Hi @Morgans ,

As we checked you have uploaded it has an image so only its cutting off in mobile.

How do I go about fixing this?

Hi,

We should create custom section in liquid code to match like the design you have in your website.