help please with snaps header scaling

• 

  tenthandbuttercup · Member · Feb 20, 2017 at 2:38 pm

  • Copy link
  • Add topic to favorites

  Hi, Customer Service suggested that I post in this forum for CSS help. I would appreciate your advice. I am using the Snaps theme and would like my photographic logo header to scale for tablet and mobile sizes so the the logo doesn’t get cut off. Can you please help? Thanks so much for your advice!

  Deb

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

• 

  staff-loquaciousloon · Staff · Feb 20, 2017 at 11:39 pm

  • Copy link

  Hi @tenthandbuttercup!

  Themes like Snaps usually use the header image as a background, since it has to resize based on the screen your visitors are using – and that means the available space isn’t always the same shape as your image.

  Give this CSS a try under My Site > Customize > CSS:

  @media screen and ( max-width: 1020px) {
      #masthead, .site-text-contain {
          height: 41vw;
      }
      .site-text-contain {
          height: calc( 41vw - 48px) !important;
      }
  }
  @media screen and ( max-width: 800px) {
      #masthead {
          background-size: cover
      }
  }

  If that doesn’t do what you had in mind, you may want to consider a header image where the text is smaller, and not as close to the edges :)

• 

  tenthandbuttercup · Member · Feb 20, 2017 at 11:53 pm

  • Copy link

  it worked!!! U r my hero! Thank you thank you thank you!!!!!!!!!!!

• 

  staff-loquaciousloon · Staff · Feb 21, 2017 at 2:38 pm

  • Copy link

  You’re welcome!