Need help? Check out our Support site, then


Can't change size of custom header

  1. wildhorizonscrossfit
    Member

    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.

  2. wildhorizonscrossfit
    Member

    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.

  3. 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%;
    	}
    }
  4. wildhorizonscrossfit
    Member

    Much better, thank you!

  5. You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic