Jump to content
Sign in to follow this  
illinimatt81

Remove gaps between sections

Recommended Posts

illinimatt81

I have tried custom css to set margins, adjusting padding to 0 for elements but I am still seeing gaps between sections of a page I am designing. For example, there is a gap where the gray page background color is showing between some sections rather than remaining white. Here is what I am referring to as an example: http://screencast.com/t/OCerImDjsjE2 I assume I need to remove the padding between sections. Anyone have some CSS suggestions to accomplish this?

Share this post


Link to post
Share on other sites
James B

Hi Illinimatt81, I've just looked on your site link and the gap shown in the screen shot is no longer there. Have you managed to resolve this using css?


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
illinimatt81

I am still seeing the issue in Google Chrome (where I took the screenshot) and also in Safari but it is rendering fine in IE and Firefox. Odd.... Maybe I need to make a specific CSS adjustment for Google Chrome and Safari? Usually IE is broken and Chrome plays nice... Any thoughts from anyone?

Share this post


Link to post
Share on other sites
illinimatt81

Actually just found one solution. The gap was between two content boxes that were stacked and the main content area. By having one content box and the main content area it disappeared. Would like to know why that was occurring still. I'm truly testing the framework using lots of drag and drop elements and code to make a custom page that does not look like anything else on the domain.

Share this post


Link to post
Share on other sites
Danny

Hi, All section have a certain amount of padding, to reduce this space simply add custom CSS with the reduced padding. Do not use negative margins. For example you have this:

body.page-id-384 .content-pad { margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; }
Replace this with the code below:
.page-id-384 #contentbox .content-pad { padding: 0; }

Then simply change the padding value above, to your desired look.

  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×