Recent Posts on Home Page

  • Unknown's avatar

    The Recent Posts on the home page are listed one on top of another instead of in a column format like the sample displays.

    Instead of 1. 2. 3. (The articles appearing next to each other)

    It appears 1.
    2.
    3. (The articles appearing one on top of the other)
    I want the Recent Posts on the Home Page displayed in column format vertically.

    The blog I need help with is: (visible only to logged in users)

  • Hi @pyrogers!

    It looks like you’ve already set the recent posts section to match the Toujours demo by checking the box under My Site > Customize > Theme Settings :)

    Did you still need a hand, or is this all set? :)

  • Unknown's avatar

    staff-loquaciousloon,

    I think the issue that pyrogers is referring to is one that is encountered with certain screen sizes and/or browser settings. On my setup, PC with 1280 x 1024 screen resolution and latest Firefox browser, I was able to duplicate the issue described (on the Toujours demo, https://priscillarogers.wordpress.com/, and test site) with three zoom clicks in. That is, three zoom clicks in transforms the horizontal row of the three latest posts into a vertical list of the three posts, with the featured image thumbnails displayed at the left and text on the right.

    Secondly, three additional zoom clicks in (six total) produces an even greater transformation. The featured images and the text of the three latest posts now display at full-width. Not only that, but the default post on https://priscillarogers.wordpress.com/ is now in the same section as the three latest posts, above the double line which separates them at the other zoom settings.

    These results suggest that similar effects would occur on smaller screens.

  • Good point @musicdoc1 – it could be screen size related. On smaller screens (narrower than 1020px) the three columns will become one, because at those sizes three columns become too narrow to look very nice :)

    The Customizer, on some screens, can trigger this change, as @musicdoc1 and I discussed recently on another thread. The ‘Collapse’ link in the bottom left of the can help you see around that :)

    One thing I’ve found in in previous tests is that browser zooming often doesn’t reflect different screen sizes well, because it’s increasing sizes, rather than decreasing the actual window.

    I’ve found I get more accurate results if I make my web browser narrower, so it only takes up a portion of my screen – or using something like Chrome’s developer tools to test responsiveness :)

    I made a couple of demo gifs… because gif making is fun ;)

  • Unknown's avatar

    staff-loquaciousloon,
    Thanks for the tip about narrowing the browser. I’ve recently heard staff members, including you and kokkieh (I think), separately suggest making the browser smaller as a way of duplicating smaller screens. I hadn’t done this in years because the way I’d done this previously wasn’t possible anymore — perhaps after upgrading to Windows 7 — and I hadn’t learned how to do it with the double-pointed arrows until a couple of days ago.

    However, because reducing the width of the browser, or even both the width and height, didn’t produce the same results in some cases as zooming in, I guessed that it might be a less useful as a simulator of screen size. I’m glad you said that it’s more accurate because it’s so much easier to do, especially compared to zooming on Firefox, where you’re force to go through the entire path (View > Zoom > Zoom In or Out) after every click.

    I’ll use the browser size adjusting method from now on. Thanks!

    P.S. Those gifs are great!

  • My pleasure :) Glad you enjoyed the gifs!

  • Unknown's avatar

    staff-loquaciousloon,

    So is the second gif a demonstration of using Chrome’s developer tools to test responsiveness? That looks like something I’d like to try.

  • Correct! There are similar tools in other browsers as well.

  • The topic ‘Recent Posts on Home Page’ is closed to new replies.