Need CSS for my Suits theme to adjust size of header in mobile

• 

  rpointsfitness · Member · Jan 3, 2017 at 2:54 am

  • Copy link
  • Add topic to favorites

  I understand that the Suits theme doesn’t have the logo feature and that the current header in my site pointsfitness.com is essentially a background. This is preventing my logo from adjusting when in a mobile device. I don’t want to turn on mobile, because it looks completely different than what I want. Could you provide me with some css so that the current image that I have as a header will adjust size accordingly when in mobile? Tried this but it didn’t work:
  img {
  height: auto;
  max-width: 100%;
  }

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

• 

  thesacredpath · Member · Jan 3, 2017 at 7:49 pm

  • Copy link

  Hi there, I think what I would suggest is that you take your header image into your image editing program and crop it tightly on left and right and save and upload that image to your media library and then add the following CSS and replace URL_OF_IMAGE in the background declaration with the URL of the new image. It may be that some adjustments will have to be made after you get that accomplished.

  .site-header {
  	background-image: none;
  }
  .site-header .home-link {
  	background: url(URL_OF_IMAGE) no-repeat scroll center center / contain;
  }