Edits to homepage/news feed structure

• 

  zacheryhenry · Member · May 18, 2016 at 11:31 pm

  • Copy link

  Any more thoughts on this one?

• 

  thesacredpath · Member · May 19, 2016 at 2:10 am

  • Copy link

  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

• 

  zacheryhenry · Member · May 19, 2016 at 3:03 am

  • Copy link

  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?

• 

  thesacredpath · Member · May 19, 2016 at 3:20 am

  • Copy link

  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;
  }

• 

  zacheryhenry · Member · May 19, 2016 at 3:27 am

  • Copy link

  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?

• 

  thesacredpath · Member · May 19, 2016 at 3:49 am

  • Copy link

  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.

• 

  zacheryhenry · Member · May 19, 2016 at 3:53 am

  • Copy link

  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!

• 

  zacheryhenry · Member · May 19, 2016 at 3:54 am

  • Copy link

  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.

• 

  thesacredpath · Member · May 19, 2016 at 4:12 am

  • Copy link

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

• 

  thesacredpath · Member · May 19, 2016 at 4:14 am

  • Copy link

  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.

• 

  zacheryhenry · Member · May 19, 2016 at 12:32 pm

  • Copy link

  Explorer/Edge works for me.

• 

  zacheryhenry · Member · May 20, 2016 at 7:12 pm

  • Copy link

  Anything on this?

• 

  kathrynwp · Staff · May 24, 2016 at 2:05 pm

  • Copy link

  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.

• 

  zacheryhenry · Member · May 24, 2016 at 2:44 pm

  • Copy link

  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.

• 

  kathrynwp · Staff · May 24, 2016 at 4:06 pm

  • Copy link

  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.

• 

  zacheryhenry · Member · May 24, 2016 at 4:26 pm

  • Copy link

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

• 

  kathrynwp · Staff · May 24, 2016 at 4:36 pm

  • Copy link

  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.

• 

  kathrynwp · Staff · May 24, 2016 at 6:37 pm

  • Copy link

  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.”

• 

  zacheryhenry · Member · May 24, 2016 at 7:50 pm

  • Copy link

  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.

• 

  kathrynwp · Staff · May 24, 2016 at 8:00 pm

  • Copy link

  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.