2 replies to this topic

[bestjimmy]

I'm looking for some direction on what steps to take to remove the large amount of whitespace between the bottom of the Call To Action element and the top of the Soapbox element on a home page.

 

A screenshot is included here and the URL for the work-in-progress site is: http://wp.safehouseweb.com/wip6/

 

Thanks in advance for any help you can offer!

 

 

 

[Danny]

Hi,

 

Try adding this to your custom CSS:

 
#page #soapbox .content-pad {
padding-top: 0;
}


#page #soapbox .fboxgraphic img {
vertical-align: middle;
}

#page #callout .content-pad {
padding-bottom: 0;
}

 

I highly recommend you install FireBug or use the web developer tools that come bundled with most modern browsers. These tools allow you to inspect your sites HTML structure, along with the CSS used to style your site and are perfect for this kind of issue.

[bestjimmy]

Danny, thanks much! That did the trick.

 

And I completely understand/appreciate your recommendation about using FireBug; I do have it but do not yet know enough about CSS to really ID what I'm looking for when I want to change something. Your help here not only solved my whitespace problem but it's also a great learning point & example for me as far as getting more CSS under my belt. Thanks, again!