Dynamic Image on Mobile

Store Design
, , , ,

Topic summary

A user seeks help making a homepage doodle image resize responsively on mobile devices. The image is currently inserted via HTML with fixed dimensions (height=“200”).

Problem: The static sizing causes display issues on smaller screens—the image doesn’t scale down as viewport width decreases.

Solution provided:

  • Replace the existing <img> tag with a responsive version that removes fixed dimensions
  • Add custom CSS to the theme.liquid file (before </head>) to enable dynamic scaling
  • The CSS ensures the image adjusts proportionally across different screen sizes

Implementation steps:

  1. Navigate to Online Store → Theme → Edit code
  2. Open theme.liquid file
  3. Insert the provided CSS markup before the closing head tag
  4. Save changes

A visual result demonstrating the responsive behavior was shared. The discussion appears resolved with a working technical solution.

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

Hello,

I’m looking for some help to make the doodle on our homepage resize dynamically with mobile. Currently, the image has been inserted onto the page with the following code:

write alternative text for image

Please can someone help edit the code so that the image will reduce in size as the screen size gets smaller (e.g. on mobile).

Thanks!

3 Likes
2

Hi @faremag kindly share your store URL please.

3

Hello @faremag
Our team is ready to help you.
Please share your website URL so that we can check and assist you.

4

Hello! The website is not active yet but here is the preview link: https://r7l9in2lfhzawi55-83299828046.shopifypreview.com

5

Change


![write alternative text for image|2086x2086](upload://1WkDD3Z87beqtesagYkdFptGwcF.png)

To


![write alternative text for image|2086x2086](upload://1WkDD3Z87beqtesagYkdFptGwcF.png)
6
  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before and press ‘Save’ to save it
7
  • Here is the result you will achieve @faremag

BSSTekLabs_0-1726498252010.png
BSSTekLabs_0-1726498252010.png377×785 159 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.