Suits Theme – Repositive header

• 

  odraregi · Member · Apr 29, 2015 at 5:19 pm

  • Copy link
  • Add topic to favorites

  Hi, i have disable the text title to use only the header image. I make some test on smartphone e tablet but the image used it no respositive, not change size.

  I use wordpress.com and my website is “gerardopandolfi.com”

  Somebody could help to add the css code to convert my website header in repositive?

  Thank you very much

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

• 

  odraregi · Member · Apr 30, 2015 at 1:46 pm

  • Copy link

  if u need to check my website try: WebOff.it

  Thanks

• 

  thesacredpath · Member · May 1, 2015 at 12:28 am

  • Copy link

  This isn’t very easy to do, and to do it strickly with CSS would require a number of Media Queries to resize the header area to fit with the logo as it got smaller and smaller to remain within the width of the screen/window.

  My first suggestion would be to make the central part of your logo image no wider than 320px and in that way it will fit on an iPhone screen in portrait orientation.

  You can also try the following which makes the image a bit smaller starting at 450px in screen/window width using a Media Query. Make sure and check it on a phone to make sure it fits.

  @media screen and (max-width: 450px) {
  	.site-header {
  		background-size: auto 55%;
  		background-position: center 20px;
  	}
  }