Why isn't my header banner responsive on my website?

Store Design
, ,
1

I need Help with my banner
How do I make my image fit and be responsive ?

I try change it to 2 images and still dont work

PuuraBrasil_0-1687484124874.png
PuuraBrasil_0-1687484124874.png767Ă—472 85 KB

2

@PuuraBrasil - looks like you have desktop banner… I would recommend to create 2 separate banners, one for desk and one for mobile

so you will have 2 banners on page now and then using css hide the unwanted one as per the screen resolution

3

Glad to help. What’s the link to your website?

4

Hello @PuuraBrasil ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to Sections folder → index.liquid file

Add this following code at the bottom of page

.hero-banner-image {
  width: 100%;
  max-width: 100%;
  height: auto;
}

Save changes

Hope this can help. Let us know if you need any further support.

Ali Reviews team.

5

Hi @irene-vintage ,

I saw your answer and tried to use the code. Unfortunately I don’t have an index.liquid file. I only have index.json. I put the code in the theme.liquid file instead. However, that didn’t work.

I use the version 11.0.0 of the Dawn theme. Could you help me please? I would be very grateful.

Thanks in advance.