[Resolved] Ideal Page Header image dimensions?

[Jono]

Hi Tom,

I’m having a lot of trouble trying to tweak the dimensions of Page Header images so they look good across a variety of screen sizes.

These are long and narrow images to be displayed 400px high. When the images have a definite focal point it’s really hard to get it looking good on both desktop and mobile, without something getting severely cropped.

Any thoughts on good all-rounder dimensions or aspect ratios?

Thanks!

– Jono

[Tom]

Hi Jono,

Images can be tough when it comes to being responsive.

Are these static images or background images? Static images are much better at being responsive.

[Jono]

Hey Tom, thanks for the reply. I’m sorry, I should have given more detail and an example link. My apologies.

These are background images using the Page Header plugin. Here’s an example: http://karmalawyers.com/who-we-are/.

Same issue on the Home page with background images in Sections.

I was just finding it tricky locating a “sweet spot” for dimensions so that the images would look good at different screen sizes. The images are naturally being displayed with very different ratios on desktop vs mobile screen sizes.

On desktop they look very short and wide, so only a sliver is shown, which may be just the tops of people’s heads. But on mobile the images are almost square, and in the case of Sections on the Home page you might only see the left part of the image.

If you have any tips on how to handle this more gracefully, it would be appreciated!

Thanks.

– Jono

[Tom]

You can apply a different image to the background specifically meant for mobile using the Simple CSS plugin: https://wordpress.org/plugins/simple-css/

Use the Simple CSS metabox on each individual page, and do something like this:

@media (max-width: 768px) {
   .generate-content-header {
        background: url( 'URL TO MOBILE IMAGE' );
   }
}

Let me know if that works or not 🙂

[Jono]

Tom, thanks so much. At this stage I probably won’t go ahead with that, but now I know how to get a better result if time permits!

– Jono

[Tom]

Glad I could help 🙂

[Christine]

I am having the same issue. I created a new image that is square in the hopes of adding it as a mobile header only. I also added simple-css and entered the coding you mentioned on each page and also on the simple css editor on my dashboard. What do you think? What am I doing wrong?

[Tom]

Hi there,

Can you link me to a page where it’s not working?

[Christine]

Here is the temporary domain:

http://s209994800.onlinehome.us/

This link will only work for my site until tomorrow around noon.

[Tom]

Hi Christine,

So it looks like you’re using a background image as your header on desktop, then you’re using the mobile header feature. That feature is best when it comes to a simple logo, not so much a full header.

What if you added your header as the logo instead of a background image (Customize > Site Identity).

Then disable the mobile header completely.

Let me know 🙂

[Christine]

I see what you are saying. However, is there any way to use to logo header feature and have it only appear on mobile devices? I made a sort of mini header image to go there. My client is wanting that full image header for the main site still.

[Tom]

This might help: https://generatepress.com/forums/topic/mobile-header-2/#post-171391

[Milos]

I am having the same issue as Christine. I also created a new image that is square in the hopes of adding it as a mobile header only. I also added simple-css and entered the coding you mentioned on each page and also on the simple css editor on my Customizer. The only background image which I can see even in mobile view is the bigger desktop image.. (which I am using with the Page- (Site) Header Elements). Could you help me please?

[Leo]

This topic is super old and the page header module has already been replaced with the header element.

Can you please open a new topic and link us to the page in question?

Thanks 🙂

[Author]

Posts