How can I make my header banner responsive on all screens?

[Mythik]

Hello everyone,

I have the problem that the banner on the start page is not responsive. The banner is always cropped on smaller screens. I want 100% of the image to be displayed on whatever screen.

I'm currently using version 11.0.0 of the Dawn theme. I would appreciate any help.

Thanks in advance.

Website: evote-shop.com

Password to view the shop: EvoteTest

[dbuglab]

Hi @Mythik 

Have to use two different banners
one for desktop and one for mobile.

Because if banner is big then it will be cut from the side in small screens

[Mythik]

Hi @dbuglab 

Thanks for your answer. I already use two different images. Only the images are always cut off on the side as the screen gets narrower. In other shops I have seen that the image is not cut off there and that 100% of the image is always visible. The height of the images changes automatically when the screen gets smaller. In my shop, the height always stays the same. But with the tag (height: auto;) it still doesn't work for me.

[dbuglab]

@Mythik 

Please use this css

[Mythik]

Hi @dbuglab 

Many thanks for your response. Your screenshot shows the desktop image in the mobile version. I added a second picture for the mobile version. Unfortunately your code didn't help. I've attached two screenshots that might describe the problem better.

On the screenshots you can see that the people on the left and right of the desktop image are cut off. The top of the image in the mobile version is cut off. They are fully visible on a large screen. I need some code that will always show the full width of the image and change the height based on the screen width so the images are always fully visible. I really hope you can help me. I've tried so many things.