Dynamic Image on Mobile

[faremag]

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:

<img src="https://cdn.shopify.com/s/files/1/0832/9982/8046/files/Reader2.png?v=1726044420" alt="write alternative text for image" height="200" max-width="" align="right"/>

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!

[websensepro]

Hi @faremag kindly share your store URL please.

[faremag]

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

[BSS-TekLabs]

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

[BSS-TekLabs]

- Here is the solution for you @faremag 

Change 

<img src="https://cdn.shopify.com/s/files/1/0832/9982/8046/files/Reader2.png?v=1726044420" alt="write alternative text for image" height="200" max-width="" align="right"/>

To 

<img src="https://cdn.shopify.com/s/files/1/0832/9982/8046/files/Reader2.png?v=1726044420" alt="write alternative text for image" class="custom-img"  max-width="" align="right"/>

[BSS-TekLabs]

1. Go to Online Store --> Theme --> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head> and press 'Save' to save it

<style>
.custom-img {
 height: 200px;  
}
@media only screen and (max-width: 600px) {
.custom-img {
 height: 100px !important;  
}
}
</style>

[BSS-TekLabs · Accepted solution]

- Here is the result you will achieve @faremag 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.