Reducing white space between header image and menubar/Enlarging featured image

  • Unknown's avatar
    minusthemooicecream · Member ·

    My site on Sela theme (minusthemoo.com) has too much whitespace between the header image (logo) and the menu bar. I would like to reduce this so our featured image shows more above the fold. Is there a way to do this?

    Also, I would like to make my Featured Image larger, so it is full bleed and longer scroll. Right now I can only make it centered and had to reduce the size so the bottom wouldn’t get cut off. Any way to fix this?

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

  • Unknown's avatar
    rachelmcr · Member ·

    Hi there,

    I can certainly help you find the CSS you need to make those changes. One useful resource that I rely on to make CSS changes is the approach described in our guide to How to Find Your Theme’s CSS — that’s the approach I use whenever I need to find the CSS to make a particular change. Another helpful resource is our CSS Customization forum. Sometimes you can find tips there to help with CSS changes to your theme, or you can always post in that forum to get additional help from volunteers there.

    My site on Sela theme (minusthemoo.com) has too much whitespace between the header image (logo) and the menu bar. I would like to reduce this so our featured image shows more above the fold. Is there a way to do this?

    I noticed that there is some whitespace at the bottom of your header image, so it may help to edit that image a bit to reduce some of the space at the bottom there. However, there are a couple other areas where you can reduce the whitespace.

    Since you aren’t displaying the site title except in the header image, you can completely remove the site title section with CSS like this:

    .site-title {
  display: none;
}

    The header area also has quite a bit of padding, so reducing that padding will remove some of the whitespace. You might try a change like this:

    .site-branding {
  padding-bottom: 10px;
}

    You can adjust the number of pixels until you get the spacing you’re looking for there. You could also change the “padding-top” property if you wanted to reduce the whitespace above your header image, to move everything on the page farther up.

    Also, I would like to make my Featured Image larger, so it is full bleed and longer scroll. Right now I can only make it centered and had to reduce the size so the bottom wouldn’t get cut off. Any way to fix this?

    I see you originally uploaded a version of that featured image that is 3657 × 2700 pixels. Can you try setting that as the featured image to see how it goes? If it still doesn’t look the way you’d like, I can take another look at it then.

    Finally, I noticed that you have set the font size on the footer credits to 0 so they don’t appear. (The footer credits are the text that says, “Blog at WordPress.com. | The Sela Theme.”) Can you please restore those footer credits?

    All WordPress.com sites must retain the footer credit — it’s a requirement of hosting a site here, even for our VIP clients. You may tweak its look and feel with custom CSS, but it must be present.

    If you’re worried about them fitting in your site’s theme, you could style them with a muted color like this:

    .site-info, #colophon a, #colophon a:hover, #colophon a:visited {
  color: #935b52;
}

    Please let me know if you have any questions about that!

  • Unknown's avatar
    minusthemooicecream · Member ·

    hi,

    thanks so much – super helpful. I will definitely use all those.

    Can you also provide any CSS code to make the top of the featured image touch the menu bar? I reduced the top padding of the featured image to 0% but its still not working….

  • Unknown's avatar
    alexjgustafson · Member ·

    Hi there!

    This one is a little tricky, took me a few tries to find the best selector. Turns out there’s a little tiny space in your header where the entry title would be that has some margin to it. We can take it away with this CSS:

    h1.entry-title{
	margin:0;
}

    That should eliminate the space between your menu and the image. :)

  • Unknown's avatar
    minusthemooicecream · Member ·

    Hi there,

    Thanks for this – when I inputted into the CSS under the Customize section it seemed to work in the view to right of the CSS. However, if I go to the site it looks the same. I have tried saving it a few times and its not sticking.

    Any tips?

  • Unknown's avatar
    alexjgustafson · Member ·

    Ah! Looks like screen size is a part of this too. On smaller screen sizes, it looks like we want – but not on bigger screen sizes. Didn’t notice this yesterday because I was on a smaller screen. :)

    I made a quick screencast to show this:

    Keep that h1 CSS, but add this to your CSS as well:

    @media screen and (min-width: 1180px){
div.entry-content{
	margin-top: -48px;
}
}

    That’ll clear it up. :)

  • Unknown's avatar
    minusthemooicecream · Member ·

    amazing! Thank you!

  • The topic ‘Reducing white space between header image and menubar/Enlarging featured image’ is closed to new replies.