[Resolved] Ideal Page Header image dimensions?

Home Forums Support [Resolved] Ideal Page Header image dimensions?

Home Forums Support Ideal Page Header image dimensions?

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #208980
    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

    #209045
    Tom
    Lead Developer
    Lead Developer

    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.

    #209848
    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

    #209885
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #210207
    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

    #210240
    Tom
    Lead Developer
    Lead Developer
    #214264
    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?

    #214371
    Tom
    Lead Developer
    Lead Developer

    Hi there,

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

    #214386
    Christine

    Here is the temporary domain:

    http://s209994800.onlinehome.us/

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

    #214414
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #214477
    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.

    #214541
    Tom
    Lead Developer
    Lead Developer
    #1153419
    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?

    #1153433
    Leo
    Staff
    Customer Support

    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 πŸ™‚

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.