How to make this header banner responsive?

[solidcodes]

Hello guys

I’m currently using WordPress, Gutenberg, Astra and Starter Template.
Here is the link to the header banner I’m currently working.
https://webmasterseoph.com/

When you shrink the page the header banner does not shrink also.
I tried adding this codes to starter template CSS.

.img {
width: 100%;
height: auto;
}

Are the codes above correct?
Where is the right file to insert this CSS codes?

Thanks in advance.

[solidcodes]

I tried these codes below.
Still doesn’t work.

.wp-block-cover__image-background wp-image-1271 {
width: 100%;
height: auto;
}

any help please?
thanks in advance.

[SamA74]

@solidcodes

.img {
width: 100%;
height: auto;
}

Are the codes above correct?

As far as I can see, your header image does not have a class named img so the above code won’t affect it.
Applied directly to an img element by writing as:-

img {
width: 100%;
height: auto;
}

…Would make a responsive image, however that wouldn’t work correctly in the context of your header.
To be honest, it is a very simple header design which would be very simple to code in a responsive way. But the theme has grossly over-complicated things with way too many nested elements and too much over-complex CSS. This has turned something very simple into something quite difficult.

[solidcodes]

I’m using Astra the Free version.
How to fix this without buying the pro version of Astra?
Thank you very very much who ever will help me.

[TechnoBear]

Are you aware that there are issues at larger screen sizes as well as smaller?

1920px wide screen:

1280px wide screen:

Is there a reason why you have to use this particular theme?

[Archibald]

If that image is going to be displayed responsively on small smartphones the text will not be legible.