rows of 3 posts then 4 posts then 3

  • Hi,

    I would like my desktop-view to display my posts in rows of 3, then the following row with 4 posts, then 3 again, etc.

    Also I would like to know if there is a way to make the quote posts wider than the other blog posts.

    My vision is that for the rows of 3, there will be an image or post that will be wider than the others (like in the appearance of sticky posts) to add some variety visually. (but the wider images would not all fall into one column but instead switch around to column 3, then 1, then 2, etc.)

    Also when I hover over my images, i see ” . . . ” is it possible to change this to an “x” with the same characteristics of when the menu icon changing into an “x” when clicked on? (except no equal sign before transforming into an x, just transform into an x)

    Is there a way to make my featured photo not look so stretched out in mobile view? How do I extend the height to make it look normal?

    Also for mobile view, is it possible to make my blog posts fall into 2 or 3 columns after the featured photo?

    Thank you for your time and your help!

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

  • Hello,

    Here are the answers on your questions:
    1. Q: I would like my desktop-view to display my posts in rows of 3, then the following row with 4 posts, then 3 again, etc.

    Also I would like to know if there is a way to make the quote posts wider than the other blog posts.

    My vision is that for the rows of 3, there will be an image or post that will be wider than the others (like in the appearance of sticky posts) to add some variety visually. (but the wider images would not all fall into one column but instead switch around to column 3, then 1, then 2, etc.)
    A: Unfortunately that modification is not possible without serious theme re-design and lot of custom work.

    2. Q: Also when I hover over my images, i see ” . . . ” is it possible to change this to an “x” with the same characteristics of when the menu icon changing into an “x” when clicked on? (except no equal sign before transforming into an x, just transform into an x)
    A: You can change it with some custom CSS. Please add this class to Custom CSS section:

    @media only screen and (min-width: 1025px) {
    .featured-image a:after {
    content: "X";
    }
    }

    3. Q: Is there a way to make my featured photo not look so stretched out in mobile view? How do I extend the height to make it look normal?
    A: I have checked your site on my phone, and everything seems fine to me. You are probably guessing why this image: https://www.screencast.com/t/KLxM48ltpf on single page looks like this: https://www.screencast.com/t/JbHyF0aVeVJ
    Well, the catch is that image on single page looks like actual image, while on posts page, image is cropped by theme to fit the design.

    4. Q:Also for mobile view, is it possible to make my blog posts fall into 2 or 3 columns after the featured photo?
    A: Sure, please add this class to Custom CSS:

    @media only screen and (max-width: 767px) {
    .grid-wrapper .post, .grid-wrapper .page {
    width: 49%;
    }
    }

    Thank you,
    – Djordje

  • The topic ‘rows of 3 posts then 4 posts then 3’ is closed to new replies.