Need help? Check out our Support site, then


Hemingway Rewritten Reducing Header Height

  1. Greetings - I'm looking to reduce the height of the header as well as the height of the site branding block (area that shows the site title and tagline) for the Hemingway Rewritten Theme so that more of the page items show within the main screen. Ideally I'm looking at 250 pixels for heading height and 150 pixels for the site branding block. Any help would be much appreciated!

    Here's my site: http://wgnfloodmitigation.wordpress.com/

    Thanks,
    Erin

    The blog I need help with is wgnfloodmitigation.wordpress.com.

  2. Yes please, I am in need as well.
    sarahpterry.com

  3. Hi All,

    You can try using the following CSS code to reduce the height of the header as well as the height of the site branding block to 250 pixels and 150 pixels respectively.

    #masthead {
    	height: 250px;
    }
    
    .site-header-image {
    	padding: 7% 0;
    	max-height: 250px;
    }
    
    .site-branding-wrapper {
    	height: 150px;
    }

    Best Regards,
    Vinod Dalvi

  4. Erin did that work for you? It hasnt for me?
    I need code to overwrite in the customize appearance CSS box

  5. Thanks Vinod,

    I think we're on the right track but not a perfect fix. The black title box gets partially hidden if I try using that code. After playing around a bit more with the CSS I was able to shorten the header height and reduce the padding around the site branding box.

    To reduce the header height I set a minimum and maximum height. I also reduced the padding for .site-branding. This isn't a perfect fix because the title becomes hidden on ipads and phones - maybe there is a 'float top' feature we can try?? Here is the CSS I used:

    .site-header-image {
    background-image: url('http://wgnfloodmitigation.files.wordpress.com/2014/04/cropped-cropped-cropped-banner3.png');
    }
    .site-header-image {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100px;
    max-height:100px;
    padding: 10% 0px;
    padding-top: 10%;
    padding-right-value: 0px;
    padding-bottom: 10%;
    padding-left-value: 0px;
    padding-left-ltr-source: physical;
    padding-left-rtl-source: physical;
    padding-right-ltr-source: physical;
    padding-right-rtl-source: physical;
    position: relative;
    }
    .site-branding-wrapper {
    position: relative;
    z-index: 2;
    text-align: center;
    }
    .site-branding {
    background: none repeat scroll 0% 0% #1D1D1D;
    background-color: #1D1D1D;
    background-image: none;
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: 0% 0%;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;
    display: inline-block;
    padding: 1.75em;
    padding-top: 0.7em;
    padding-right-value: 1.75em;
    padding-bottom: 0.2em;
    padding-left-value: 1.75em;
    padding-left-ltr-source: physical;
    padding-left-rtl-source: physical;
    padding-right-ltr-source: physical;
    padding-right-rtl-source: physical;
    }
    .site-title {
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 700;
    font-size: 30px;
    font-size: 3.0rem;
    font-family: "Raleway", sans-serif;
    margin: 0;
    text-align: center;
    width: 100%;
    }
    .site-title a {
    color: #fff;
    }
    .site-description {
    color: #fff;
    font-family: "Raleway", sans-serif;
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: 300;
    opacity: 0.6;
    text-align: center;
    }
    .site-description:before {
    content: "";
    display: block;
    width: 0px;
    height: 0px;
    background: rgba(255,255,255,0.1);
    margin: .0em auto;

  6. This isn't a perfect fix because the title becomes hidden on ipads and phones - maybe there is a 'float top' feature we can try??

    For the header and site title height adjustments you described, try this instead of what you currently have:

    .site-header-image {
    	min-height: 0px;
    	max-height: 250px;
    	padding: 4% 0;
    }
    
    .site-branding {
    	padding: .8em 1.7em;
    }
    
    .site-description:before {
    	margin: .4em auto;
    }

    Be careful to either remove all the custom CSS you currently have that's related to the same height adjustments or just remove all of your custom CSS, add the example and test it, then add back any other CSS you need that's separate and re-test to make sure none of the other rules you were adding interfere with the heights in the example.

    If you examine the theme's existing CSS, you'll see that some heights of things are fluid and not set to a specific pixel amount (i.e. the site-branding padding and margins on the :before pseudo element for site-description). It's often better to follow the theme's way of doing spacing and also use the same units of measure like em or % and that's what I've done in the example above. To test this out, try adjusting the 4% top and bottom padding on site-header-image to something smaller like 1% and take a look at how that changes the header.

  7. Hi Design Simply-
    I found a post of yours that scaled my header image down and made it absolutely beautiful! I was a total fool and deleted my css and now no matter what I do I can't get that back. It shrunk my header down in size but it scaled the image down with it. Please help?

    Thanks!

  8. CSS revisions are all saved! Try going to Appearance > Customize > CSS and look at the very top right of the panel. Click the "CSS Revisions" link. You should be able to find all the recent CSS there and get back what you had saved before.

  9. If you still have trouble after that, start a new thread at http://en.forums.wordpress.com/forum/css-customization/#postform and someone will take a closer look. :)

  10. OH AWESOME. Thanks!

Topic Closed

This topic has been closed to new replies.

About this Topic