Need help centering CSS/HTML images on mobile {they fit perfectly on desktop}

Shopify Discussion

Topic summary

A Shopify store owner is experiencing CSS alignment issues where images display centered on desktop but not on mobile devices. Screenshots were provided showing the misalignment.

Solution Provided:

  • Add CSS media query targeting mobile screens (max-width: 600px)
  • Target specific custom code section IDs containing the images
  • Set image width to 100% for responsive scaling
  • Code should be added to base.css, style.css, or theme.css in the Assets folder

Alternative Approach Suggested:

  • Use separate image elements for desktop and mobile
  • This allows different image sizes for better mobile performance
  • Helps control proportions and file sizes more effectively

Outcome:
The CSS solution successfully fixed the initial alignment issues. The user encountered a similar problem with another image section but appears to have resolved it independently using browser inspect tools.

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

Hi @divinelyguided :waving_hand: Part of this comes form having a large explicit width on the img element itself.

So you may want to use two image elements 1 for desktop and 1 for moble , as that will also let you use a different smaller image if you want to better control the entire proportions on mobile and improve performance if the initial image has a large file size.

In your custom-code section try the below code adding your existing img src file name attribute

,or replacing values of the width attribute/css-properties to need.