Can't change size of custom header

• 

  wildhorizonscrossfit · Member · Apr 17, 2017 at 7:03 pm

  • Copy link
  • Add topic to favorites

  Trying to decrease the size of the custom header on the Lodestar theme. It is absolutely massive on Desktop and super small on mobile. I want to be able to see the image well, but don’t necessarily need it to take up half the desktop page, and on mobile i can barely see it. Why is there such a large discrepancy?

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

• 

  wildhorizonscrossfit · Member · Apr 17, 2017 at 9:15 pm

  • Copy link

  Have since had success with:

  .custom-header .custom-header-image { height: 200px; }

  However, I cannot go below a certain point, and I would like to restrict this further on desktop. Also, cannot get a media query to work for mobile, although the size with this current CSS is not horrible.

• 

  thesacredpath · Member · Apr 18, 2017 at 9:11 pm

  • Copy link

  Hi there, change your height to max-height like this

  .custom-header .custom-header-image {
  	max-height:200px;
  }

  and then add the following also, and you can adjust the 5% value I’ve given as an example as desired.

  @media screen and (min-width: 30em) {
  	.custom-header-image {
  		padding: 5%;
  	}
  }

• 

  wildhorizonscrossfit · Member · Apr 21, 2017 at 1:54 pm

  • Copy link

  Much better, thank you!

• 

  thesacredpath · Member · Apr 21, 2017 at 9:45 pm

  • Copy link

  You are welcome.