Desperately seeking whitespace I want to REMOVE.

  • Hi All…I’m hoping this is a relatively easy fix for someone knowledgeable. I’ve been scouring CSS for over an hour trying to find the source of some whitespace that lies between my navigation menu and the image slider on this page…

    https://coopersrock.wpengine.com/?page_id=50

    Some of it appears to be padding above/below the site header…but I don’t reduce padding to 0 above—only below. I tried using…

    .site-header {
	padding-top: 24px 0;
	padding-top: 1.714285714rem 0;
	padding-bottom: 0px 0;
	padding-bottom: 0rem 0;
}

    …but this accomplished nothing. (Not sure why?) In any case, header padding doesn’t account for all the whitespace.

    I also found this page here in the forum:

    https://www.ads-software.com/support/topic/white-space-twenty-twelve

    …and got excited because this person wanted to do exactly what I’m trying to do…but for some reason I wasn’t able to get the fixes suggested on this page to work.

    If someone could take a look at my site and help me figure out how to remove the whitespace, I’d be grateful! My goal (like the person on the above-linked page) is to have my slider sit right beneath the navigation menu.

    Thanks very much!
    Scott

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter SWriverstone

    (@swriverstone)

    By the way, I’ve been using Chrome’s “Inspect Element” feature to search CSS, and I’ve created a child theme where I’ve been testing additions to style.css (and removing them when they don’t work).

    My intention also is to NOT have page titles displayed.

    Try adding this to your child theme style.css file:

    .site-header {
    padding: 0;
}

.site-content {
    margin: 0;
}

    Thread Starter SWriverstone

    (@swriverstone)

    Thanks WPyogi—that worked—almost! It removed the whitespace between my navigation menu and the slider…but it also removed the whitespace above the header.

    Is there a way to put back the whitespace just above the header?

    Scott

    Thread Starter SWriverstone

    (@swriverstone)

    Wait—I fixed it. There was a leftover header margin addition in style.css (from a previous attempt at tweaking)…

    .header-image {
	margin-top: 0px;
	margin-top: 0rem;
}

    Once I deleted that, everything looked good! Awesome—thanks again! You’re an enormous help to many people here! ??

    Scott

    Oops, try adding this too:

    img.header-image {
   margin-top:  30px;
}

    The one other thing that you may need to check on is how this looks on resized browsers – you might need to be putting some of your CSS inside a media query for bigger screens so it does not mess up small ones.

    Thread Starter SWriverstone

    (@swriverstone)

    Ok, added that too. It didn’t have any effect—is it a fallback?

    I’m not sure I fully understand your suggestion about the media query…but I’m working on a big monitor (an Apple Cinema Display), and when I resize the browser window (Chrome) the page resizes gracefully with nothing funky happening. (So does this mean I’m ok? LOL)

    Here’s my child theme’s style.css so far…

    /*
Theme Name:     Twenty Twelve Child
Theme URI:      https://example.com/
Description:    Child theme for the Twenty Twelve theme
Author:         Scott Wilkinson
Author URI:     https://example.com/about/
Template:       twentytwelve
Version:        0.1.0
*/

/*---The following line invisibly adds everything in the Twenty Twelve theme style.css into this "child" theme---*/

@import url("../twentytwelve/style.css");

/*---The additional CSS code below overrides the same parts of the parent stylesheet.
------------------------------------------------------------------------------------*/

/*---Remove space above navigation menu so it sits snugly beneath the page header---*/
.main-navigation {
margin-top: 24px;
margin-top: 0rem;
text-align: center;
}

/*---Remove whitespace between navigation menu and image slider (or other page content)---*/
.site-header {
    padding: 0;
}

.site-content {
    margin: 0;
}

img.header-image {
   margin-top:  30px;
}

    Try clearing your browser cache – it’s working for me.

    Thread Starter SWriverstone

    (@swriverstone)

    Yep, it looks fine now—thanks!
    Scott

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Desperately seeking whitespace I want to REMOVE.’ is closed to new replies.