header image with mobile

• 

  gunsoutblog · Member · Sep 28, 2016 at 9:06 pm

  • Copy link
  • Add topic to favorites

  Hi.

  I need help with header image. it doesn’t show right with mobile phone. I found this code
  img {
  height: auto;
  max-width: 100%;
  }

  but i dont know shit about html so i cant get it work. can you please help me? :)

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

• 

  hallluke · Member · Sep 29, 2016 at 6:12 pm

  • Copy link

  What’s the problem at the moment and what are the specifics about how you’d like to change it?

• 

  gunsoutblog · Member · Sep 29, 2016 at 7:43 pm

  • Copy link

  The header image is too wide for mobile, so it cuts part of image out of screen. How do i get it to fit with mobile?

• 

  hallluke · Member · Sep 29, 2016 at 9:29 pm

  • Copy link

  Devices come in all sorts of sizes so it’s basically impossible to set a perfect design in each. If you do want the header image to show the entire width on mobiles you can add the following code, it will make the image less tall, and I’ve included a black background to take up the remaining space:

  @media screen and (max-width: 360px) {
    .site-branding {
      background-size: contain;
      background-color: #000;
    }
  }