How to remove gap of top & bottom posts? – Twenty Eleven Two Columns Child Theme

  • Resolved VGNE

    (@vgne)


    11 years, 9 months ago

    Hello,

    My name is Rafael and I am new to WordPress and these forums. I am using the Twenty Eleven Theme with Digital Raindrops’ Twenty Eleven Two Post Columns child theme.

    I am trying to remove the gap between a top and bottom post. Here is an example highlighting what I mean. As you can see there is only a gap on the shorter of the two side by side posts. The only main code I’ve edited so far on Digital Raindrops’ child theme is the content-index.php. I changed it to where the entire post will show on the home page instead of just an excerpt (but even before changing this there still was a gap on the shorter of the two side by side posts).

    I am really struggling with this ?? Any help will be greatly appreciated!

    -Rafael

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi Rafael,

    I am bit worried that you won’t be able to remove this blank space, as the headlines of posts are supposed to be aligned. To confirm this theory, could you try to shorten the content of Post 3?

    Thread Starter VGNE

    (@vgne)

    Hey, thanks for the quick reply. Here is what I got. Hopefully it can still be fixed!

    Hi,

    No probs. I can see there’s still a gap below the share buttons which I am pretty sure can be reduced. This can be definitely done by CSS tweak. Is there any chance to see the theme live in action, so I can tell what needs to be adjusted?

    Cheers

    Thread Starter VGNE

    (@vgne)

    I already tried reducing the space between the share buttons and the post below it editing the CSS, but it still does not fully reduce the space between the top and bottom post when the post next to the top post includes more content.

    At the moment my website just has an under construction page with no content. If it’s really needed I can remove the under construction page and link to it with a little content, but I’ve already tried pretty much everything in regards to editing the CSS using Firebug.

    Let me know and thanks again for helping me!

    Hi,

    You have to decide, what are your preferences. If you want to have posts nicely aligned next to each other, I am afraid it won’t be really possible.

    I can see folowing solutions here:

    1. You leave it as it this and you will limit the content of posts on this page to be always plus/minus same size. Can help with that, if you wish?
    2. We can get rid off aligning posts, that will remove the gap , but posts won’t be nicely aligned from my point of view. I am pretty sure you wouldn’t like it too.

    If it’s not much trouble for you, please make the site live somewhere and I can give you exact pointers, what to do to achieve required look and feel.

    Cheers

    to ‘stack’ posts without gap, you would need to re-program the way the posts are output;

    right now, the posts are arranged with a float; and with css alone there is no (at least no easy) way to achieve what you want.

    here is a coding structure to ‘stack’ the posts; https://www.transformationpowertools.com/wordpress/playing-with-columns-stacking-posts-grid-style
    you will need to re-code index.php, content.php, and adapt style.css;

    Thread Starter VGNE

    (@vgne)

    I tried solving this for quite a few hours using alchymyth’s method on transformationpowertools.com (good informative website by the way), but my PHP skills are not where they need to be to accomplish this task. I decided just to put a fixed even height on my posts with an overflow-y scroll. I like it about the same so I’ll stick with that.

    Thank you BoUk and alchymyth. Hopefully someone else can find this good information helpful!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How to remove gap of top & bottom posts? – Twenty Eleven Two Columns Child Theme’ is closed to new replies.