Radiant theme - make Image for Homepage responsive

[Jojo_pudding]

Hi,

Please can someone tell me how to make my header image responsive? I'm on the radiant theme and I added the 'image for homepage' using custom code.

Screenshots attached. On a desktop view (image 1), it looks how I want it, but when I look on a mobile view (image 2), the header image stays big and disappears off the screen. 

The URL is https://josephinedellow.myshopify.com/

Thankyou 😊

1

2

[devcoders · Accepted solution]

Hello @Jojo_pudding 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

.img-container {
text-align: center;
}
.img-container img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}

[Jojo_pudding]

Oh, amazing!! Thankyou so much, that's worked perfectly 😄