How to make this header banner responsive?

Hello guys

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

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.

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.

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.

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.

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?

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



This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.