How to make Page Header Mobile Friendly (Responsive)?

Hi there, are you able to provide access to the site?

No, Actually site is in Under maintenance, I am redesigning the site.
Are you asking for what? admin access or what?

We just need to be able to view the site. We can then browser inspect it to diagnose the problem.

Ok, let me finish my work then I will make the site live from maintenance mode...

Ok, let me know :)

Hi, David!

The site is live now, you can check the page I was talking about staymeonline.com/blog

Please help me ASAP
Thank you :)

Hi there,

remove the left and right padding from the page hero content. Let me know

Gotcha! It has been solved!

Thanks, David for your fast support :)

You're welcome :)

Is there any option to make background image fit on the screen in mobile view?

You would need to make a few changes and a little CSS.
Make the H1 responsive by removing the inline-css you have. And then set this in your Customiser > Typography > Headings. Set the Desktop to 70 and then reduce the mobile right down to say 44px.

Then you can adjust the mobile top and bottom padding in the page hero to about 10% each.

Then add this CSS:

@media (max-width: 768px) {
    .page-hero {
        background-size: 100%;
    }
}

It is working as you said, But there is another issue which is, when I add the CSS you given. it makes image fit to screen and when I adjust the heading as you given size above.

Header text looks very small and image is too... it makes whole header very small...

The image is wide but not very tall, so to make it fit 100% this is the unfortunate side effect. If you don't mind losing some of the image off the edges then you can increase background-size over 100% and increase padding and H1 font size. But you cant make the image taller and 100% wide without distorting it.

Ok Understood.

Thank You :)