How to remove gap between different posts with different fullwidth background

[weaverfan]

Hello! 

It is about the homepage: http://elektrowinterling.com/

Admin: 001 Password: 246810

I am trying to build a homepage with different sections including different background colors – as you have created here:http://demo.weavertheme.com/plus-plugin/  (I am using Weaver Xtreme Plus)

Every section is built with a post and I have inserted them in the page content (with the “Raw” template) using the Insert Show Post Button. 

As you can see there are now gaps between the different posts. I am very new in using posts and perhaps a way to fix it is to give a minus value to every post for margin-top and margin-bottom.

But for me it isn’t  the best way to fix it. What other possibilities do I have to avoid or close the gap between the posts?

[scrambler]

I am not 100% sure I follow.

The space between post I see comes from

You have set the top and bottom padding on post to 70px and 65px
.post-area {padding-top:70px;}
.post-area {padding-bottom:65px;}

There is a default 1em bottom margin on show post made by the rule
.atw-show-posts .post, .atw-show-posts .hentry {margin-bottom:1em;}
That can be removed with the same rule and a different value

Your images inserted in the posts are inside a paragraph tag that has a 1em bottom margin. May be use “Allow raw HTML and script” option so WordPress does not add these p tags, or else we could come up with CSS to remove it

There is a small gap left I am not sure how to remove, but given how much you are adding yourself, I would think you could just reduce all your added space to compensate, as visually it does not affect the effect.

By the way you don’t have to use posts for that effect, you can simply use div container with the full width class as explained in the thread below
http://forum.weavertheme.com/discussion/11124/full-width-designs

[weaverfan]

Honestly I do not have any  idea, how the margin-bottom 1em on show post comes from… Thanks for this note. I have removed it with the same rule.

This is a good way to get rid of the gap and it looks fine now.

Thank you for your answer and also the note to use div container with the full width class to get the same result.

I read about it, but wasn’t sure what the best way is. Will try it next time!

[Author]

Posts