Horrible Whitespace!

  • baggie58

    (@baggie58)


    7 years, 9 months ago

    Before I start tbf it’s not just the one page, it’s every page on my site!

    The whitespace problem is as follows:

    Header image
    Site title
    ——————–tons of whitespace ———————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
    Text

    It’s driving me mad – I’ve tried adding various extra bits of CSS as seen on here but I can’t get anything to work.

    Anyone have any ideas? I have been alerted to the fact that there’s a space for a hero image in this exact place in the coding, I have a screenshot but can’t see a way to add that here. And to be frank, not so big on hero images. What are they and do I need one?

    many thanks in advance for giving up your time.

Viewing 3 replies - 1 through 3 (of 3 total)
  • sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    7 years, 9 months ago

    Let’s start with this and see how this works for you.

    #primary, #secondary {
	padding-top: 0;
}
    sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    7 years, 9 months ago

    Hmmm, looking at your various pages, the above isn’t going to work when the page has a featured image. I’m not immediately seeing a quick way to exclude those pages with featured images. Let me work on this a bit and see if I can. If not, we will have to use unique page id CSS selectors to only affect pages without featured images.

    sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    7 years, 9 months ago

    Ok, as I thought, no quick easy way to do this. Add the following instead of the above, which uses the unique page id CSS classes on the pages set in the opening body html tag to lessen the padding and to remove the featured image div from a couple of the pages where it is showing, but empty.

    .home #primary, .home #secondary, .page-id-213 #primary, .page-id-213 #secondary, .page-id-236 #primary, .page-id-236 #secondary {
	padding-top: 0;
}
.page-id-213 .hero, .page-id-236 .hero {
	display: none;
}

    If you are going to add featured images to all of your pages, then don’t add the last CSS rule for hiding the .hero div.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Horrible Whitespace!’ is closed to new replies.