Make header image responsive for phones

Store Design
1

Hello :waving_hand:

Can anyone please tell me how to make my banner image responsive, so that it shrinks when viewing on a phone, to fit the width of the screen? I’m on radiant theme.

The banner shows on every page by the way, not just home page, in case that’s relevant.

Thankyou :blush:

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

2

Hi @Jojo_pudding

Let add this Custom CSS to your theme Settings:

.image-for-homepage .img-container img{
  max-width: 100%;
}

it will display beautiful on every screen

BiDealDiscount_0-1747320964386.png
BiDealDiscount_0-1747320964386.png762×866 393 KB

3

Thanks for your reply. Which page of code do I need to add this to please?

I tried pasting in theme.liquid but it didn’t change anything, was that the wrong place?

4

let go to edit code and find file assets/base.css.

Add my code suggestion to the end of that file

5

@Jojo_pudding please add this css given by @BiDeal-Discount to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css

6

Hooray, that worked! Thankyou! :grin:

7

you’re welcome. Let me know if you need any other assistance :hugs: