[Resolved] How to make Page Header Mobile Friendly (Responsive)?

[Ravi Dixit]

I have created a page header for my blog page, it was very easy to create with the Legacy page header but when I finished it and open in mobile view it is not mobile friendly at all.
Here is the screenshot of desktop view: https://www.staymeonline.com/screenshot-25/
And here is the mobile view: https://www.staymeonline.com/screenshot-26/

I want to make it mobile friendly tried all ways but don’t know how?

[David]

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

[Ravi Dixit]

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

[David]

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

[Ravi Dixit]

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

[David]

Ok, let me know 🙂

[Ravi Dixit]

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 🙂

[David]

Hi there,

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

[Ravi Dixit]

Gotcha! It has been solved!

Thanks, David for your fast support 🙂

[David]

You’re welcome 🙂

[Ravi Dixit]

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

[David]

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%;
    }
}

[Ravi Dixit]

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…

[David]

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.

[Ravi Dixit]

Ok Understood.

Thank You 🙂

[Author]

Posts