Appearance of display posts shortcode with featured images

  • Author
    Posts
  • #3260661

    justjennifer
    Moderator

    Howdy! I’m working on this temporarily visible page https://wpcommaven.com/articles/ using the Display Posts shortcode as follows:
    [display-posts category="article" image_size="medium" include_excerpt="true" posts_per_page="10" wrapper="div"]

    However, everything runs together vertically and I’d like to add some space to visually separate the posts. Without the excerpt and only the Post title, there is still no space between the featured images and they stack right on top of one another.

    Ultimately my goal is to use this page as one of Lodestar’s front page panels, but have the posts appear in two columns or preferably a grid.

    Is there a way to do this with CSS and that will also be mobile-friendly?

    I’m also open to suggestions on other ways to achieve this goal. I do have the ability to edit both the theme’s CSS and install plugins on this site.

    Thanks in advance.

    The blog I need help with is wpcommaven.com.

    #3262325

    charleybea
    Member

    Hello @justjennifer,

    Are you still looking for some suggestions? I wanted to try to give this a go if you are.

    Can you try the following CSS?

    .display-posts-listing .listing-item {
    max-width: 45%;
    margin-right: 10%;
    margin-bottom: 10%;
    float: left;
    clear: none;
    }
    
    .display-posts-listing .listing-item:nth-child(even) {
    margin-right: 0;
    }
    
    .display-posts-listing .listing-item .image {
    width: 100%;
    }

    If you give this a try, let me know how it goes. It may need further tweaking – just let me know. :)

    #3262332

    justjennifer
    Moderator

    Thanks @charleybea I’ll give that a try.

    #3262988

    justjennifer
    Moderator

    Hey @charleybea It ended up being a very long vertical scroll with the number of posts I chose to display, but I’ll continue to play around with the page layout and CSS you provided. I’ll post back here if I have more questions. :) Thanks again for your help.

    #3263423

    charleybea
    Member

    Hello @justjennifer,

    Hmm, I’m going to try to play with the shortcode you posted on a test site and see if I can find an alternate solution as well.

    Definitely let me know if you found a solution or if you have more questions. I’m curious to see how this works out. :)

    #3263533

    charleybea
    Member

    Hi @justjennifer,

    Okay, I think I figured out what was causing the layout to not go to 2 columns. Here’s the updated code you can try:

    @media screen and (min-width: 580px) {
    .display-posts-listing .listing-item {
    max-width: 45%;
    margin-right: 10%;
    margin-bottom: 10%;
    float: left;
    clear: none !important;
    }
    
    .display-posts-listing .listing-item:nth-child(even) {
    margin-right: 0;
    }
    
    .display-posts-listing .listing-item .image {
    width: 100%;
    min-height: 150px;
    }
    }
    
    .display-posts-listing .listing-item {
    margin-bottom: 10%;
    }

    Essentially this should fix the layout so it goes into a 2-column grid. For screen sizes smaller than 580 pixels, the layout will go back to 1 column with the posts stacked, but still have some breathing room between the posts.

    If you give that a try, let me know if that works better. :)

    #3263841

    justjennifer
    Moderator

    That does look much better, also as a front page panel! Thank you @charleybea for taking the time to help me with this. :)

    #3264157

    charleybea
    Member

    You bet! I’m glad it worked for you and that I could help. :)

The topic ‘Appearance of display posts shortcode with featured images’ is closed to new replies.