Post grid using Shortcode

  • Resolved vinzen

    (@vinzen)


    7 years, 10 months ago

    Hi Aldo,

    I want to create a post grid of latest posts using shortcode. I created the following shortcode:

    [pissc number=2 post_type=”post” display_image=”true” image_size=”crp_thumbnail” image_align=”center” bottom_image_margin=”10″ excerpt_margin=”30″ exc_length=”40″ remove_bullets=”true”]

    This creates one row of two posts. I want the subsequent posts to appear in the next rows. If I increase the “pissc number” in the shortcode, the posts increase in the same row instead of creating a new row.

    I used the following CSS:

    .pis-ul {
  display: flex;
}
.pis-li {
  margin-right: 10%;
}
.pis-title {
  text-align: center;
  font-weight: 600;
}
.pis-excerpt {
  display: table-caption;
  text-align: center;
}

    Please let me know how should I go about creating multiple post rows in a post grid using the PIS shortcode and CSS codes.

    The one I created is like the one enclosed in red box in this image –
    https://s11.postimg.org/ft66yjyqb/sample-row.jpg

    Thanks.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Aldo Latino

    (@aldolat)

    Hi Vinzen,
    I need to look at the theme you are currently using. It’s necessary because every theme uses its own rules. There is no one solution for all. Could you tell me the URL of your site?

    Thread Starter vinzen

    (@vinzen)

    Sure. This is the link to one of the posts that uses the PIS shortcode and you’ll find its output near the end of the post – https://www.aha-now.com/chicken-soup-bloggers-soul/ as shown in the earlier screenshot.

    Plugin Author Aldo Latino

    (@aldolat)

    Vinzen,
    these lines of CSS make want you want:

    /************************************************
	posts-in-sidebar
************************************************/

.pis-ul {
  overflow: hidden;
}
.pis-li {
  float:left;
  width: 40%;
}
li.pis-li:nth-child(odd) {
  margin-right: 10%;
}
.pis-title {
  text-align: center;
  font-weight: 600;
}
.pis-excerpt {
  display: table-caption;
  text-align: center;
}

    I see that you have a section dedicated to Posts in Sidebar in your file style.css. So, try these lines instead of them.

    Let me know, please.

    Thread Starter vinzen

    (@vinzen)

    Yes, it works like a charm! Splendid.
    Thanks so much, Aldo. ??

    Plugin Author Aldo Latino

    (@aldolat)

    You are very welcome! ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Post grid using Shortcode’ is closed to new replies.

Tags