Image header too small on mobile

• 

  saltnchili · Member · Nov 2, 2013 at 2:33 pm

  • Copy link
  • Add topic to favorites

  My header image looks too small on the mobile version. It looks ok on PC browsers. I’m using CSS customization, how can I re-size the image only for the mobile version? I’ve tried the below, which has enlarged the image but, the image is no longer centered.

  @media only screen and (max-width: 640px) {
  .site-header img {
  max-width: 150%;
  height: auto;
  }
  }

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

• 

  thesacredpath · Member · Nov 4, 2013 at 6:11 pm

  • Copy link

  Hi, this is a bit of a “hack” but it seems to work clear down to 320px width (smartphone size). Add the following to your @media only screen and (max-width: 640px) rule and see what you think.

  .site-header img {
  	max-width: 150%;
  	margin-left: -23%;
  }

• 

  saltnchili · Member · Nov 5, 2013 at 1:33 pm

  • Copy link

  Awesome, this worked perfectly. Thanks for your help.

• 

  thesacredpath · Member · Nov 5, 2013 at 9:30 pm

  • Copy link

  You are welcome.