Can't change size of custom header

  • Author
    Posts
  • #2925467

    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 wildhorizonscrossfit.com.

    #2925614

    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.

    #2925782

    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%;
    	}
    }

    #2925817

    Much better, thank you!

    #2925819

    You are welcome.

The topic ‘Can't change size of custom header’ is closed to new replies.