Mobile Responsive Header Image

• 

  jplresourcedev · Member · Jul 5, 2016 at 6:40 pm

  • Copy link
  • Add topic to favorites

  Hi,

  I have a header image that we created for our blog that will not scale on a mobile device. We just changed the theme of the blog to Expound to try to fix this issue, but it seems we need a CSS trick to help.

  Does anyone know how to get the header image to scale instead of crop on mobile devices?

  Blog I need help with: https://ilovejpl.wordpress.com

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

• 

  hallluke · Member · Jul 5, 2016 at 6:57 pm

  • Copy link

  Try adding this to your existing custom CSS:

  .site-header .site-branding {
  	background-size: contain;
  	background-color: #D6D6D6;
  	background-position: center;
  }

• 

  jplresourcedev · Member · Jul 5, 2016 at 7:50 pm

  • Copy link

  That worked, thank you! Do you know how to remove the tags from the pictures on the articles as well?

• 

  thesacredpath · Member · Jul 5, 2016 at 8:13 pm

  • Copy link

  Hi, this will hide the categories from the blog posts on the main page.

  .entry-thumbnail-category {
      display: none;
  }

• 

  jplresourcedev · Member · Jul 5, 2016 at 8:21 pm

  • Copy link

  Thanks!

• 

  thesacredpath · Member · Jul 5, 2016 at 8:58 pm

  • Copy link

  You are welcome.