Size of grid/"latest posts" images on home page

Home Forums Automattic Photo Blog Size of grid/"latest posts" images on home page

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #164702 Resolve

    kuroiyousei

    I would like to have the “latest posts” images be smaller and displayed in a larger grid (5×5, for example). Is this a possibility?

    (For some reason, the “which blog” drop-down isn’t giving me the blog where I actually use the Photo Blog theme; it’s thelongestyear.net)

    #164703

    Kris

    Hey there!

    This is a bit of a more complex change, but can be achieved with the below custom CSS code:

    `
    /* Change Blog Grid to 5 Columns */

    @media screen and (min-width: 1024px) {

    /* Change grid element padding and width */
    .archive .hentry,
    .blog .hentry,
    .search-results .hentry {
    padding-bottom: calc(20% – 1.5em);
    width: calc(20% – 1.5em);
    }

    /* Remove clears */
    .archive .hentry:nth-of-type(3n+4),
    .blog .hentry:nth-of-type(3n+4),
    .search-results .hentry:nth-of-type(3n+4) {
    clear: none;
    }

    /* Remove top margin */
    .archive .hentry:first-of-type,
    .blog .hentry:first-of-type,
    .search-results .hentry:first-of-type,
    .archive .hentry:nth-of-type(2),
    .blog .hentry:nth-of-type(2),
    .search-results .hentry:nth-of-type(2),
    .archive .hentry:nth-of-type(3),
    .blog .hentry:nth-of-type(3),
    .search-results .hentry:nth-of-type(3) {
    margin-top: 0;
    }

    }
    `

    Please go to My Sites -> Customize -> Additonal CSS panel to add the code.
    If you have any additional questions, then please let me know. :)

    Have a great day!

    • This reply was modified 3 years, 5 months ago by  Kris.
    #164705

    Kris

    Hey there!

    This is a bit of a more complex change, but can be achieved with the below custom CSS code:

    `
    /* Change Blog Grid to 5 Columns */

    @media screen and (min-width: 1024px) {

    /* Change grid element padding and width */
    .archive .hentry,
    .blog .hentry,
    .search-results .hentry {
    padding-bottom: calc(20% – 1.5em);
    width: calc(20% – 1.5em);
    }

    /* Remove clears */
    .archive .hentry:nth-of-type(3n+4),
    .blog .hentry:nth-of-type(3n+4),
    .search-results .hentry:nth-of-type(3n+4) {
    clear: none;
    }

    /* Remove top margin */
    .archive .hentry:first-of-type,
    .blog .hentry:first-of-type,
    .search-results .hentry:first-of-type,
    .archive .hentry:nth-of-type(2),
    .blog .hentry:nth-of-type(2),
    .search-results .hentry:nth-of-type(2),
    .archive .hentry:nth-of-type(3),
    .blog .hentry:nth-of-type(3),
    .search-results .hentry:nth-of-type(3) {
    margin-top: 0;
    }

    }
    `

    Please go to My Sites -> Customize -> Additonal CSS panel to add the code.
    If you have any additional questions, then please let me know. :)

    Have a great day!

    #164706

    Kris

    Hey there!

    This is a bit of a more complex change, but can be achieved with the below custom CSS code:


    /* Change Blog Grid to 5 Columns */
    @media screen and (min-width: 1024px) {
    /* Change grid element padding and width */
    .archive .hentry,
    .blog .hentry,
    .search-results .hentry {
    padding-bottom: calc(20% 1.5em);
    width: calc(20% 1.5em);
    }
    /* Remove clears */
    .archive .hentry:nth-of-type(3n+4),
    .blog .hentry:nth-of-type(3n+4),
    .search-results .hentry:nth-of-type(3n+4) {
    clear: none;
    }
    /* Remove top margin */
    .archive .hentry:first-of-type,
    .blog .hentry:first-of-type,
    .search-results .hentry:first-of-type,
    .archive .hentry:nth-of-type(2),
    .blog .hentry:nth-of-type(2),
    .search-results .hentry:nth-of-type(2),
    .archive .hentry:nth-of-type(3),
    .blog .hentry:nth-of-type(3),
    .search-results .hentry:nth-of-type(3) {
    margin-top: 0;
    }
    }

    view raw

    style.css

    hosted with ❤ by GitHub

    Please go to My Sites -> Customize -> Additonal CSS panel to add the code.
    If you have any additional questions, then please let me know. :)

    Have a great day!

    • This reply was modified 3 years, 5 months ago by  Kris.
    #164708

    kuroiyousei

    Perfect!! Exactly what I wanted! Thank you so so much! I really appreciate the help, and the quick response!

    My other question is this: no matter what number I put into “Blog posts – Display [ ] per page,” my home page still only shows 9 blocks. Any idea why this is?

    #164709

    Kris

    Wonderful!

    > My other question is this: no matter what number I put into “Blog posts – Display [ ] per page,” my home page still only shows 9 blocks. Any idea why this is?

    This might be conflicting with the Infinite Scroll option you have currently selected. Could you please go to My Site -> Settings -> Writing and then scroll to the “Theme Enhancements” section and choose “Load more posts using the default theme behavior”. After that, all of the 15 posts should show on the page.

    #164710

    kuroiyousei

    Once again perfect! Thank you x100 for your speedy, spot-on responses! You’ve been extremely helpful, and I’m grateful.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.