WordPress.org

Ready to get started?Download WordPress

Forums

Pinboard
Empty spaces on homepage (12 posts)

  1. mren
    Member
    Posted 1 year ago #

    Hi,

    I have too much whitespace between two entries on the homepage. Any way/idea to solve that problem? See https://dl.dropboxusercontent.com/u/72964873/WP-pinboard-prob.png (a screenshot of my local test site).

    The two boxes which are side to side don't need to start on the same height (for me, that is). I just don't like the white space.

  2. aschultz
    Member
    Posted 1 year ago #

    I've seen the same issue. It seems the designer used float:left on the articles, which causes problems with the layout when the articles are not all the same length.

    Try injecting the following CSS into your [Appearance -> Theme Options -> Layout -> Custom CSS] box:

    .twocol {
        width: 49%;
        display: inline-block;
        float: none;
        vertical-align: top;
        /*Dirty IE 7 Hack*/
        zoom: 1;
        *display: inline;
    }
  3. aschultz
    Member
    Posted 1 year ago #

    *edit to preserve narrow window behavior:

    .entries {
        display: inline-table;
    }
    .twocol {
        display: inline-block;
        float: none;
        vertical-align: top;
        /*Dirty IE Hack*/
        zoom: 1;
        *display: inline;
    }
  4. mren
    Member
    Posted 1 year ago #

    Hi aschultz,

    sorry for the delay. Now I've found some time and tested your code and it seems that with it the second content column (middle one: left and middle are content, right one is the sidebar) isn't used anymore, it's still completely empty, all articles are in the left column.

  5. aschultz
    Member
    Posted 1 year ago #

    Woe unto me for not testing across browsers. Sorry about that. I know inline-block is the solution, I just need to get the right combination of other settings.

    I'll take another look and get back to you.

  6. aschultz
    Member
    Posted 1 year ago #

    Looks like it was an issue with the spacing that inline-block can add based on whitespace in the HTML. Try the following. I've tested it on my site across the Chrome/FF/IE.

    #content .entries {
        /* Attempt to remove whitespace caused by inline-block settings for children */
        display: inline-table;
        letter-spacing: -0.25em;
        word-spacing: -0.25em;
    }
    
    #content .entries article {
        /* Undo negative spacing */
        letter-spacing: normal;
        word-spacing: normal;  
    
        /* Turn off float set by theme */
        float: none;
    
        /* Line up articles on the top edge */
        vertical-align: top;
    
        /* Wrap the articles */
        display: -moz-inline-stack;
        display: inline-block;
        /* IE 6/7 hack */
        zoom: 1;
        *display: inline;
    }

    Here's some info on the topic:
    http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
    http://css-tricks.com/fighting-the-space-between-inline-block-elements/
    http://www.lifeathighroad.com/web-development/css-web-development/inline-block-whitespace-workaround/

    Btw, if you want to change the size of the main/sidebar columns, just add this and adjust the values:

    .twothirdcol {
        width: 80%;
    }
    
    .threecol {
        width: 20%;
    }

    Edit: Updated to fix for wide articles

  7. mren
    Member
    Posted 1 year ago #

    No need to be sorry, I appreciate your work and help.

    Tested the new solution and it almost works. Almost in this case: The text of the first article (which spawns over both columns) isn't readable anymore, as all text is written in one line (eache new line overwrites the ones before without any clearing or newline). Also the links under the article (author, permalink, ...) are unreadable as there seems to be no letterspacing. But if I comment out the letter-spacing:-0.25em and word-spacing:-0.25em the text gets displayed correctly but the second column is gone.

    So I tried and added ", article.onecol" after article.twocol and it seems to work.

  8. aschultz
    Member
    Posted 1 year ago #

    Ah, yeah, I forgot about the wide articles. I had them turned off.

    Your fix sounds good. Also an option is to do "#content .entries article" instead of "article.twocol, article.onecol" so that it applies to every article inside the content section, regardless of its column class, and doesn't affect any potential articles outside the content section.

  9. mren
    Member
    Posted 1 year ago #

    Thank you. It works. Thank you very much.

    One last question for this topic: ATM the left and right articles start at the same line, regardless of the ending of the upper article. Like, the right article is shorter than the left one, but both following (lower) articles begin at the same point (which is set by the longer upper article). Do you think it's possible that the articles start independently? Only set by a margin/padding from the article above, not paying attention to the neighbour column?

  10. aschultz
    Member
    Posted 1 year ago #

    Do you mean such that articles flow left to right, and wrap, but when they wrap they collapse up to the bottom of the article above them? I'm not sure how I'd do that.

  11. aschultz
    Member
    Posted 1 year ago #

    Looks like the latest version of Pinboard (1.0.9) does what you want (and doesn't need the hacks above). It uses lots of absolute positioning to make it happen.

  12. mren
    Member
    Posted 1 year ago #

    With 1.0.9. I also get the spaces between the articless, so I need your fix there too.

    What I was trying too say: ATM the left and right article "boxes" always start at the same height, which is the the end point from the larger box above + the margin/padding. Say, you have 2 article boxes, the left one is 50 long (units doesn't matter here), the right one is 64 long. The both boxes after them will start at 64+padding/margin, which will cause that the whitespace is not the same between the boxes. My question was/is: Is it possible to start the next article independently from the article in the other column? So that the article always starts at "previous article in the same column"+padding/margin.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic