How to resize an image for mobile in a custom liquid section?

Store Design

Topic summary

Main issue: make an image in a Shopify custom Liquid section resize properly on mobile.

  • Resolution for original case (gigachew.com.au): A CSS media query in the section’s Custom CSS fixed it. Using the correct selector was key. Final working rule: @media screen and (max-width: 749px) { img { width: 100% !important; } } The earlier attempt using .img didn’t apply.

  • Follow‑up from the same user: Some homepage images look blurry in the mobile editor; may be editor-only. No confirmed cause or fix provided.

  • Second user (gharfurniture.com): Similar mobile sizing issue, but images are set as background images in the section. Helper advised adding CSS in theme.liquid after , but the actual code snippet wasn’t shown in the thread; the user reported no improvement. Helper replied “Code updated,” but no visible code. Status: unresolved; likely needs background-image specific CSS (e.g., background-size/position) or different section settings.

  • Notes: Multiple screenshots were shared for context; no attachments/code central to the final fix beyond the simple media query.

Outcome: Original poster’s image sizing issue is solved. Later questions (blurry images; background-image resizing) remain open.

Summarized with AI on January 4. AI used: gpt-5.
7

Sorry, my bad. Please update code like this

@media screen and (max-width: 749px) {
  img {
    width: 100% !important;
  }
}