How do I resize my header image to fit on a mobile browser?

• 

  michellemanco · Member · Oct 23, 2014 at 9:26 pm

  • Copy link
  • Add topic to favorites

  I just upgraded to premium today and I’m not familiar with CSS at all. I’m using my logo as the header image and the site looks great when you view it on a desktop, but the edges of the logo are cropped when you view it through a mobile browser.

  Is there a certain code I can use to resize the image?

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

• 

  nizamilputra · Member · Oct 24, 2014 at 3:00 am

  • Copy link

  Hi there,

  Let me try to help you. First you need to know about Editing CSS then try to add this css;

  @media only screen and (max-width: 600px){
      .site-header{
          background-size: 100%;
          background-position-y: center;
     }
  }

  Hope it will helps you.