Header image issue in mobile view

• 

  egm28 · Member · Nov 28, 2014 at 12:14 am

  • Copy link
  • Add topic to favorites

  I think my header image (Ebony McFarland Print Designer) is a problem. When I look at my website in the mobile view, the header image is way out of view. The header image is under “site-branding a” in CSS. I wanted to center the header image but the “text-align:center” code wouldn’t work so I used “margin-left:320px.” I’m thinking that it’s not the right code to use. Is there a code that would fix this?

  My URL is https://ebonymcfarland.wordpress.com/

  My theme is Fontfolio

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

• 

  thesacredpath · Member · Nov 28, 2014 at 9:45 pm

  • Copy link

  Hi there, your header image is currently 721px wide, and phones in portrait orientation are typically 320px, so we will have to set things so that the image resizes to fit in the available space.

  First, find this in your custom CSS and remove it

  .site-branding a{
  	margin-left:320px
  }

  and then add the following

  .site-branding {
  	width: 100%;
  	text-align: center;
  }

  See what you think of this and let us know if there are any issues.

• 

  egm28 · Member · Nov 28, 2014 at 9:51 pm

  • Copy link

  Hi thesacredpath:

  The code worked! Thank you very much.

• 

  thesacredpath · Member · Nov 28, 2014 at 10:11 pm

  • Copy link

  You are welcome.