Appearance of display posts shortcode with featured images

  • justjennifer · Member ·

    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: (visible only to logged in users)

  • 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. :)

  • justjennifer · Member ·

    Thanks @charleybea I’ll give that a try.

  • justjennifer · Member ·

    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.

  • 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. :)

  • 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. :)

  • justjennifer · Member ·

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

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