Extra White Space In Header and Main Area on Homepage- Twenty Twelve Theme

Here’s some code bits for what you’re trying to do.

1:

.main-navigation {
    margin-top: 10px;
}

2:

.site-content {
    margin-top: 10px;
}

3:

body.home .entry-content p {
    margin-bottom: 10px;
}

4:

.entry-content img {
    margin: 0px;
}

And you can change any of those numbers to whatever you’d like the spacing to be.

Hi Brittany,

Download the Custom CSS Manager Plugin and copy and paste the lines that fevered provided you with in that plugin, good luck ??

Thank you for reaching out RInorMaz.

I have a custom CSS manager and am editing the code that way. I am just not sure what code to edit- I have tried a lot of things.

Just add the code that I posted in the css plugin, you don’t need to find any lines to modify.

Oh I didn’t even see your previous comment, fevered. Thank you so much!! That code was so helpful. Just perfect. Thank you, thank you!

Fevered, you have been so helpful, I wonder if you have any words of wisdom to share about this other page.

On this page I would like where it says “Staff Positions” to be just the line above the table below it, with no space. I can’t seem to figure it out.
https://50.87.248.68/~suzannw4/about/

I tried reformatting the table and including “Staff Positions” in the first cell, with nothing in the cell to the right of it, but then the entire table is double spaced.

This is the code I have right now:

Staff Positions:
<table>
<tbody>
<tr>
<td>
NextAvenue.org (lifestyle editor)
Pilates Style (editor in chief)
Vegetarian Times (editor in chief)
Redbook (senior editor)</td>
<td></td>
<td>InStyle (senior editor)
New York Woman (staff editor)
CableGuide (senior editor)
Spy magazine (copy editor)</td>
</tr>
</tbody>
</table>

Thanks for your help!

Hi Sophiefire13,

try adding this to your CSS-plugin:

element.style {
margin-bottom: 0px;
}

By adjusting the 0px you can make the layout how you want to.

Regards,

Hi, Brittany:

The problem is that WordPress will throw in paragraph marks in the most inopportune moments, so even though you may input your code like this:

<strong>Staff Positions:</strong>
<table>
...

If you inspect the code, you’ll see this:

<p>
<strong>Staff Positions:</strong>
</p>
<table>
...

Paragraphs have a bottom margin of 1.714285714rem, which is what’s causing all that white space after the “heading.”

So there are a couple of things you can do. The most obvious is to make the heading part of the table itself:

<table>
<thead>
   <tr>
      <td colspan="3"><strong>Staff Positions:</strong></td>
   </tr>
</thead>
<tbody>
   <tr>
      <td>
NextAvenue.org (lifestyle editor)
Pilates Style (editor in chief)
Vegetarian Times (editor in chief)
Redbook (senior editor)</td>
<td></td>
...

One additional “word of wisdom” that you might want to think about. I see that you’re using tables to set the layout of the page. Tables are notorious for not being responsive. That is, if you shrink the width of the page to the same width of a cell phone, you’ll see that the right column squishes down very thin. In a responsive design, the right column would collapse underneath the left column so that both are easy to read on a cell phone. What you might what to think about doing is convert that top-level table to DIVs, set the width of each DIV to 50%, and float each DIV to the left. Then you would use a media query to set the widths of each to 100% when the screen width goes under 767px (the width of a tablet), or maybe at 600px, which is when the menu switches to a mobile menu.

Thank you both so much for your help.

RinorMaz, unfortunately this didn’t work.

element.style {
margin-bottom: 0px;
}

CrouchingBruin, thank you so much for taking the time for this very helpful response.

I tried using the code you gave me, and modified it a few times, but it doesn’t seem to be working. I wonder if there is an automatic spacing between rows that is causing the problem?

So then I tried pulling the section title out of the table again. I understand what you are saying about <p> tags being inserted, but when I go into the html, there aren’t any there. I’m assuming there is some built in padding in the CSS for table elements that I could remove, but that seems like a lot of work.

I really like what you are saying about removing the table coding from this page. It’s a total pain. I’m trying to switch around images and it’s not working at all because of it.

So I tried working with the <div> tags but I’m having trouble getting two columns. I’ve tried a few different things and researched online, but no matter what I do all the text seems to be on the left hand column. Any words of wisdom?

Thank you again!

If you do a view source on the page, you’ll see this:

<p><strong>Staff Positions:</strong></p>

So WordPress is adding the paragraph tags around the title.

What you can also try doing is putting DIV tags around it:

<div><strong>Staff Positions:</strong></div>

This should prevent the paragraph tags from being added, and it should close up the spacing.

So the way your current layout is structured, you have a table with two columns, each of which is set to 50% width:

<table>
<tbody>
<tr>
<td width="50%">
   <!-- Left hand column contents -->
</td>
<td width="50%">
   <!-- right hand column contents -->
</td>
</tr>
</tbody>
</table>

So the way you would convert this to DIVs is like this:

<div id="left-column">
   <!-- Left hand column contents -->
</div>
<div id="right-column">
   <!-- Right hand column contents -->
</div>

Then you would add some CSS like this to your custom CSS:

#left-column {
   float: left;
   width: 48%;
}
#right-column {
   float: left;
   width: 48%;
   margin-left: 4%;
}

@media screen and (max-width: 600px) {
    #left-column,
    #right-column {
        width: 100%;
        margin-left: 0;
    }
}

The first two rules set the widths of each column to 48% so you can have a “gutter” (margin) between them of 4%. Then the last rule is a media query which sets the width of each to 100% when the screen width drops below 600px, which is when the mobile menu appears, so on a cell phone, the right column will drop under the left.

You can see a demo here. Notice that when you decrease the width of the browser window, the right column collapses under the left.

CrouchingBruin, thank you SO MUCH. This all worked. Oh wow, you have been so helpful, I cannot thank you enough!

Please do not feel pressured to keep helping me, but if you are interested, there are a couple other things I’m trying to sort out.

I would like to make the text in the table on the about page (below “staff positions”) the same color as the rest of the text on the page. I tried a couple things, but I imagine you have an easy solution for figuring out what color that is and the tag to use.

Also, I’m wondering how to remove the white space between menu items in my drop down menu.

Lastly, I’m trying to change the main menu font (not drop downs) and h1 font to a custom font I have. I was using “Use Any Font” and it was working for a time, but it got messed up when I switched the domain over. I can try using it again with the new domain when their free trial is back up, but figured I’d reach out in case you had a better idea.

Thank you, thank you for all your expertise!

I would like to make the text in the table on the about page (below “staff positions”) the same color as the rest of the text on the page.

Looks like you solved that problem by converting the table to DIVs. Congrats, it works much better, now. And as you work with DIVs, you’ll find that they are a lot easier to use than tables for layout. You don’t have to bother with all of the different table tags, like tbody, tr, td, etc.

One word of caution: coding standards say that an ID should only apply to one element. So technically you shouldn’t give those new Staff Position DIVs the same ID as the page layout DIVs. What you can (and should) do is change those IDs to classes, like this:

<div class="left-column">

Then in your CSS, you would change every instance of #left-column to .left-column, i.e., you change the hash tag to a period (a period in a CSS selector signifies a class name, a hash tag signifies an ID). Do the same for right-column, and for all four DIVs (i.e., the Staff Position DIVs as well as the all-encompassing page layout DIVs). It is allowable, and even commonly done, to have elements with the same class on a page, especially when those elements need to be styled in an identical way. For example, on a blog page which shows multiple posts, every post title will have a class called entry-title assigned to it so a CSS rule can be written which affects all of the post titles on the page.

Also, I’m wondering how to remove the white space between menu items in my drop down menu.

What I would do is set the background color of the menu to match the background color of the menu items so it doesn’t look like there’s any space separating the menu items:

.sub-menu {
   background-color: #efefef;
}
.main-navigation li ul li {
    margin: 0;
}

The second rule is to make sure the width of the menu items match the width of the menu container.

I’m trying to change the main menu font (not drop downs) and h1 font to a custom font I have. I was using “Use Any Font” and it was working for a time …

I’ve never used Use Any Font, but if you have a question about it, you can post a question on their support page.

I have used Google Fonts, and there are a lot of plugins that you can try to integrate a Google Font into your site. When I use a Google Font, though, I don’t use a special font plugin, but I add the link to the font using a plugin called Header and Footer which allows me to add stuff like external links and scripts.

CrouchingBruin, thank you again so much for all this help.

I’ll work on changing the div tags to classes as you suggested.

What you offered for the drop down menus worked perfectly. Thank you so much!

And that is helpful about the fonts.

You have made this project so much easier and more enjoyable. Thank you, thank you!