Edits to homepage/news feed structure

  • Author
    Posts
  • #2631666

    zacheryhenry
    Member

    Any more thoughts on this one?

    #2631667

    Sorry Zachery, it’s been crazy. Replace the code I had given above with the following. Things are a bit confusing on IE support, but it appears like this should cover back to IE9.

    .blog #site-wrapper,.blog #core-content,.blog #footer {
        width:1200px;
    }
    .blog #core-content {
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    .blog .hentry {
        max-width: 30%;
        width: 100%;
    }
    .entry-content pre {
        white-space: pre-wrap;
    }

    Let me know what you think

    #2631668

    zacheryhenry
    Member

    Hmmmm. Showing up for you all in one column on left side? It’s odd, because when I’m in the CSS Customizer I can see it in three panels. Save and go live and it appears in one column?

    #2631669

    Hmmm, perhaps it is the order of the declarations. Try replacing the .blog #core-content rule with this.

    .blog #core-content {
    	display: flex;
    	display: -ms-flexbox;
    	display: -webkit-flex;
    	flex-direction: row;
    	-webkit-flex-direction: row;
    	-ms-flex-direction: row;
    	flex-wrap: wrap;
    	-webkit-flex-wrap: wrap;
    	-ms-flex-wrap: wrap;
    	justify-content: space-between;
    	-webkit-justify-content: space-between;
    	-ms-flex-pack: justify;
    }

    #2631670

    zacheryhenry
    Member

    Whala! Worked. The “Older Posts” button moves around quite a bit with this format. Any way to lock it in place at the bottom of the page? Or is there a way to enable continual scrolling?

    #2631671

    Hmmm, I just checked your site in Safari, and it isn’t rendering correctly (single column instead of 3 per row. Looking at the code in your customizer, everything should be fine. I don’t see any mistakes or anything missing.

    On the older posts button, it took me a while to find it. :) This will fix that issue.

    .blog #infinite-handle {
        width: 100%;
    }

    I’ll have to work on the column issue in Safari. I checked Chrome and Firefox and they are fine. Chrome and Safari are both webkit-based, so I have no idea why this isn’t working properly. Off to do some research.

    #2631672

    zacheryhenry
    Member

    Interesting. I have Mozilla and Chrome on my PC, so wouldn’t have known otherwise. Thank you for checking that! Let me know if you find out anything. Appreciate all of your help!

    #2631673

    zacheryhenry
    Member

    I added that CSS. Any reason that you can figure that when you click “Older Posts” the next posts that pop up appear in a single column? Lol.

    #2631674

    Zachery, make sure and check Internet Exploder/Edge also. It can be… well… finicky?

    #2631675

    I found the issue with the alignment after you click the older posts button. I’ll have to do some testing along with the Safari issue.

    #2631676

    zacheryhenry
    Member

    Explorer/Edge works for me.

    #2631677

    zacheryhenry
    Member

    Anything on this?

    #2631679

    kathrynwp
    Staff

    Hi there, in this declaration:

    .blog .hentry {
        max-width: 30%;
        width: 100%;
    }

    Change the third line to 30% as well, so it becomes:

    .blog .hentry {
        max-width: 30%;
        width: 30%;
    }

    Let me know how it goes, and if you have any new questions, please feel free to start a new thread.

    #2631680

    zacheryhenry
    Member

    That worked! Still having problems with the “Older Posts” button at bottom of page. It brings up the additional posts all in the left column.

    #2631681

    kathrynwp
    Staff

    The posts loaded with “Older posts” are displayed in a div with a different name than what you’ve targeted so far; they’re in a div with a class called “infinite-wrap.”

    That means if you change this:

    .blog #core-content {
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    to this:

    .blog #core-content, .blog .infinite-wrap {
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    …then that will apply your flexbox columns to the posts in the new wrapper.

    #2631682

    zacheryhenry
    Member

    Hmmm… that seems to have made things a tad worse. Lol. At least on Chrome.

    #2631683

    kathrynwp
    Staff

    I see what you mean. You can go ahead and remove .blog .infinite-wrap to get it to how it was before.

    You can see that flexbox is tricky. If I can find a way to tweak this further I’ll let you know.

    #2631684

    kathrynwp
    Staff

    Looks like something’s a bit off now. The previous CSS revision can be found here:
    https://zacheryhenry.wordpress.com/wp-admin/revision.php?revision=4200

    If you’d like to try restoring it directly from here, you can click “Restore This Revision.”

    #2631685

    zacheryhenry
    Member

    Thanks for catching that! I had to jump off and didn’t get a chance to make sure it had restored to normal. Let me know if you find out anything.

    #2631686

    kathrynwp
    Staff

    I just tried

    .blog #core-content, .blog .infinite-wrap

    again and it still works for me.

    Can you try manually adding that bit — , .blog .infinite-wrap — rather than copy pasting? I wonder if whatever was throwing things off just now was affecting this before too.

The topic ‘Edits to homepage/news feed structure’ is closed to new replies.