Argent theme banner image not resizing correctly on mobile

  • Unknown's avatar
    dredgcumbe · Member ·

    The banner image shows correctly on landscape on an iPhone, but it is truncated on both sides when viewed in portrait on iPhone. Is there a way to address this?

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

  • staff-loquaciousloon · Staff ·

    Hi @dredgcumbe!

    The reason this happens is that as the screen gets narrower, and the header height remains the same, shape of that section changes – so different amounts of the image fit in it. The way to fix it is to adjust the height of the header on smaller screens so the width to height ratio doesn’t change as much.

    The height adjustment currently does happen – but not until time to preserve this specific image, as the two faces are so close to the edges of the image.

    We can tweak the point at which the theme makes this adjustment with some CSS, so it fits this image a bit better.

    Try adding the following snippet into the CSS section of your Customizer:

    @media screen and (max-width: 930px) {
.home .site-branding {
    padding: 4.5em 0;
  }
}

    In my tests, this prevented either people in the photo from disappearing off the sides. :)

    Let me know how it works when you add it to the site!

  • Unknown's avatar
    dredgcumbe · Member ·

    Thank you – I tweaked the number to 1.5em and it is working well. Thank you again!

  • staff-loquaciousloon · Staff ·

    My pleasure! Glad it all worked out!

  • The topic ‘Argent theme banner image not resizing correctly on mobile’ is closed to new replies.