Edits to homepage/news feed structure

← 1 2 3 →

Author

Posts
May 18, 2016 at 11:31 pm #2631666

zacheryhenry
Member

Any more thoughts on this one?

May 19, 2016 at 2:10 am #2631667
thesacredpath
Staff
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
May 19, 2016 at 3:03 am #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?

May 19, 2016 at 3:20 am #2631669
thesacredpath
Staff
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;
}
```
May 19, 2016 at 3:27 am #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?

May 19, 2016 at 3:49 am #2631671
thesacredpath
Staff
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.
May 19, 2016 at 3:53 am #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!

May 19, 2016 at 3:54 am #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.

May 19, 2016 at 4:12 am #2631674

thesacredpath
Staff

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

May 19, 2016 at 4:14 am #2631675

thesacredpath
Staff

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.

May 19, 2016 at 12:32 pm #2631676

zacheryhenry
Member

Explorer/Edge works for me.

May 20, 2016 at 7:12 pm #2631677

zacheryhenry
Member

Anything on this?

May 24, 2016 at 2:05 pm #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.
May 24, 2016 at 2:44 pm #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.

May 24, 2016 at 4:06 pm #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.
May 24, 2016 at 4:26 pm #2631682

zacheryhenry
Member

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

May 24, 2016 at 4:36 pm #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.

May 24, 2016 at 6:37 pm #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.”

May 24, 2016 at 7:50 pm #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.

May 24, 2016 at 8:00 pm #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.
Author

Posts