Removing white space below nav bar

[nhed]

Hi.

I'm having a bit of trouble removing extra white space that shows up when the site width starts to get narrower.

I'm using the Altitude theme. This installation is just a sandbox so I can get the theme set up.

I have made changes to the functions.php :

//* Remove all post titles
remove_action('genesis_entry_header', 'genesis_do_post_title');

//* Remove the entry meta in the entry header (requires HTML5 theme support)
remove_action( 'genesis_entry_header', 'genesis_post_info', 5 );

This and a few tweeks to the css file has the page the way I want in full width. But then it gets under 1205px there starts to appear a lot of white space.

Here's a video of what happens:

http://screencast.com/t/pk0G12wxaIY

And here's a video of the inspector of the area where the white space appears:

http://screencast.com/t/YGnQtUjHnT9

Thanks for the help. Please let me know if you need more info.

All the best,

Ed

http://join-ed.com/newlywed-got-flu-three-weeks-after-mandatory-flu-shot-and-died-2

[Porter]

Holy damn this is hard to find. I took a quick peek, and saw absolutely nothing, which only made me more curious. After a good half hour or so of peeking around / playing the CSS, I found this:

.author-box:before, .clearfix:before, .entry:before, .entry-content:before, .pagination:before, .site-container:before, .site-footer:before, .site-header:before, .site-inner:before, .widget:before, .wrap:before {
content: " ";
display: table;
}

The "display: table;" portion seems to be adding some of the height - when I disabled it, that gap closed considerably. Unfortunately, there's still quite a bit of blank area, and I have no idea where it's coming from.

I'm going to subscribe to this thread out of pure curiosity, because this is driving me nuts.

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[nhed]

Hey Porter. Thank you so very much for the time and the info. I'm new at all this, so this is great.

How did you search and find the display table thing?

I removed "table" from the css. Not sure if that's how you disable it, but I did that and I now have a bit less white space.

Thank you once again Porter. I appreciate the help. I really do. I'm hoping someone else will come and off a solution as on a mobile device it's a lot of white space to lose.

All the best,

Ed

[Porter]

I'm not sure if you know this or not (I'm experienced, and even I learned this a bit late), but if you re-size the browser window, it'll run the same media queries as on mobile, as they're just based on the width of the browser. You can just make the window no full screen, and drag it to various sizes, and you'll see the changes live. In Chrome, you can then right click > inspect element, and you'll see the CSS and html there. It's a bit messy to dig through if you're not experienced with it, but it is all there, and no harm can come of digging through it, changing values, etc (it changes it live, but reverts to your actual files when you refresh). I basically looked through your css, and ticked (the checkboxes turn each css feature on or off) various features on and off, as I didn't see any direct margin or padding (the seemingly obvious culprit, but not here).

For the time being I suggest actually leaving that display table code in, so that someone who knows more than we do can give you a proper solution. If you end up empty handed (unlikely, as long as you bump this thread up every 24-48 hours if you still have no luck), you can always remove it and revert back to the slightly smaller area I was able to find.

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[nhed]

OK. Thanks once again. Yes, I use the inspector in both Firefox and Chrome. I've learned a lot. But I am just a beginner with WP so it's rough. I'll add the table back in. I hate to take things out when I don't know what they are or what they do. 🙂 Have a great week.

All the best,

Ed

[nhed]

I removed the title area since I am using a visual editor to build my pages that includes the title. I did this add code to the functions.php

Could the white space be some other area that I need to remove with php?

[nhed]

I just got a reply from support. They said:

It looks to be a css issue and you can correct the space by modifying the theme's stylesheet to remove the white space in empty titles above your posts at smaller screen widths.

Does anyone have any ideas as to where I might look in the css to remove the extra white space?

[Porter]

That is unfortunately an incredibly useless response - I'd expect a lot more from StudioPress. You should respond letting them know that there's no margin or padding that can be found, and that whatever is causing it is deeply hidden within the theme, and not a simple CSS change. While it is VERY likely a CSS change, it's one that is obviously a bit more advanced than a beginner / moderately experiences developer can spot (I'm not great with css, but I know my way around it decently).

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[nhed]

Thanks Porder. I'll keep you posted when I hear back. 🙂

I do appreciate the help.

All the best, my friend.

[nhed]

OK. I got another answer suggesting the following:

You could try adding this code around the @media only screen and (max-width: 800px) { media queries in your style.css file :

.entry-header:after {
margin-bottom: 0
}

.entry-header {
padding-top: 0;
}

I placed the .entry-header:after code before the @media only screen and (max-width: 800px) { and the .entry-header code after the @media only screen and (max-width: 800px) .

That reduced the white space some, but it pushed the title under the nav bar/logo area (not sure exactly what that is called).

Any ideas?

Thanks again and again for the help.

[Porter]

Is that code still live on your site? All I saw was a date below the nav bar, with the big white space, then the rest below.

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[nhed]

Yes, it's back to the way things were. I was just a bit discouraged and reverted back to the original css and functions.php to see if I could figure things out but quickly switched back. So now things are like they were, except that now I have a lot less useless white space. 🙂 Thank you for your help!!

OK. I got a tip from Tonya. She had me add back in the padding-top to the css.

Here's her suggestion:

If you go to line 549 of your style.css, you’ll find that the margin-top being applied to .site-inner is very small. Your header’s height is 77px. Therefore, you should have at least 100px here or more.

You can see our discussion here:

Remove post title hook removed titles sitewide!

I'm still having trouble with just removing the titles from posts. I need to remove titles only from posts but leave the titles for pages. I believe there is a plugin to remove the titles from pages if I end up needing to.

[nhed]

OK. If you check the above mentioned thread, you'll see we resolved the issues. Thank you all for your help!! I do appreciate it.

All the very best.

[Author]

Posts