Header image doesn't translate

  • Unknown's avatar
    bephii · Member ·

    Hello, I am using the Affinity theme, and I am uploading a header image for my website. When I view it on desktop mode/on the front page on web browser, the image is significantly different than how it is seen in the editing mode and mobile view.
    Is there a fix for this?
    Thanks

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    leifq · Member ·

    Hi there,

    If you don’t mind me asking, how is it displaying differently, and how would you like for the Header image to display?

    There is also some specific information on the Affinity Theme here that might be of interest:
    https://wordpress.com/themes/affinity/

    Hope this helps.

  • Unknown's avatar
    bephii · Member ·

    here’s how it looks when i go directly to my page on desktop
    http://i67.tinypic.com/x1nmnl.png

    Here’s how i would assumed it looks
    http://i63.tinypic.com/23rpfrq.png

    and here’s mobile view
    http://i67.tinypic.com/2llhm3q.png

    Thanks

  • Unknown's avatar
    leifq · Member ·

    In the Customizer > Header Image section, it looks like Affinity recommends a header image size of 2000 x 1200 px (pixels). Your current header appears to be sized at 1718 x 457px, so it would be good to try out an image at the recommended size and aspect ratio (width-to-height ratio).

    Also, the CSS positioning for the header image sets it at the center of the image container, along with a 100% width setting. What this means is that the part of the image container that will change, or flex, with the screen size, is the height of the image.

    With regards to the difference you see in the editor…
    There is less screen space when previewing your site in the editor because the menu panel to the left takes up some of that space.

    When customizing the Header Image, try clicking on the blue ‘Collapse’ button at the bottom of the editing panel and notice how the image flexes or responds to the change in screen size.

    Because your current header image is not at the recommended size or aspect ratio, you will still not be able to see the ‘sunset horizon’ that you expect to see – as displayed in the mobile version.

    Let me know if that helps to clarify a bit.

  • Unknown's avatar
    bephii · Member ·

    Thanks a lot for your time. It makes more sense now. I just wish it was a consistent image with the mobile view. I’ll just eventually change the image later on.
    Thanks again

  • Unknown's avatar
    leifq · Member ·

    No problem.

    Real quickly…
    At full screen, there’s quite a difference in height between the recommended 1200px and the actual 457px, but Affinity is doing its best to present the image as intended, without distorting it.

    Once it gets down to the smaller mobile screen, the container for the header image gets re-set (using media queries) to a minimum height that is now shorter than 457px. That means that all of your current header image will now fit within the new ‘mobile-sized’ container, which is why it displays correctly.

    Once you have a header image set at the recommended size, you should be able to get a consistent experience across (most) devices.

    Responsive web design can be a little tricky, but glad to hear you’re getting it.

    Keep blogging ;)

  • The topic ‘Header image doesn't translate’ is closed to new replies.