header image in mobile view looks distorted – 2017 theme

• 

  climbingyogawoman · Member · Sep 10, 2017 at 9:42 am

  • Copy link
  • Add topic to favorites

  Hello together,
  i need help with the header image in the mobile view. The right side of the image doesn’t show in the mobile version. I tried some different tips like:

  I turned off the separate mobile theme and select “No” next to “Enable mobile theme.”

  Even some CSS codes like:

  @media screen and ( max-width: 800px ) {
  #masthead.site-header {
  background-size: contain;
  }
  }

  and

  @media screen and ( max-width: 800px ) {
  #masthead.site-header {
  background-size: auto 100%;
  }
  }

  but unfortunately the image view doesn’t change in the correct size like on the website/desktop view.
  Any chance to get help?

  Thanks in advance,

  Rebekka

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

• 

  thesacredpath · Member · Sep 12, 2017 at 6:56 pm

  • Copy link

  Hi there, the header image in Twenty Seventeen is inserted with an html img tag as opposed to a background, so the code you have tried will not have an affect on its positioning or alignment. This is a bit tricky to do, but add the following and see what you think.

  .has-header-image .custom-header-media img {
    left: auto;
    right: 0;
    width: auto;
  }

  It keeps the image aligned at the right border instead of letting the image of the woman slide off to the right on smaller screens.

• 

  climbingyogawoman · Member · Sep 13, 2017 at 8:14 am

  • Copy link

  @thesacredpath Mighty thanks for your help. It works perfectly!

  Thanks and best regards,
  Rebekka

• 

  thesacredpath · Member · Sep 13, 2017 at 6:55 pm

  • Copy link

  Rebekka, great, and you are welcome.