Feature Posts on Business Top Sidebar

@johnfdrake

Can you visit Appearance -> Customize -> Design -> Blog Post Display Type and select the required display type for your site and check?

Thanks.

Hello! Thank you for getting back to me.

That changes the formatting on the blog post change, but that’s not the page I am trying to alter.

I am trying to add a widget onto the homepage where I can display recent 3-6 blog posts in the same way that I currently display a number of pages:

https://starlingsafety.com/

@johnfdrake

There might be a plugin available in the WordPress plugin directory for same. So, can you search there and manage as needed?

Thanks.

Thank you Nitu!

Okay, I’ve inserted custom HTML into the widget and pasted in the following shortcode:

[display-posts image_size=”medium” wrapper=”div” wrapper_class=”display-posts-listing grid” posts_per_page=”3″]

I then edited the CSS as follows:

/* Grid style */
.display-posts-listing.grid {
display: grid;
grid-gap: 8px;
}

.display-posts-listing.grid .title {
display: block;
}

.display-posts-listing.grid img {
display: block;
max-width: 642px;
height: auto;
margin: auto;
padding: 10px;
}

@media (min-width: 600px) {
.display-posts-listing.grid {
grid-template-columns: repeat( 2, 1fr );
}
}

@media (min-width: 1024px) {
.display-posts-listing.grid {
grid-template-columns: repeat( 3, 1fr );
}
}

But I CANNOT seem to edit it so that:

1) the text is centered under the images
and
2) it shows the Exerpt

Do you have any suggestions?

Thank you!

Okay so that code was messing things up so I’ve reverted to its original:

/* Grid style */
.display-posts-listing.grid {
display: grid;
grid-gap: 16px;
}

.display-posts-listing.grid .title {
display: block;
}

.display-posts-listing.grid img {
display: block;
max-width: 100%;
height: auto;
}

@media (min-width: 600px) {
.display-posts-listing.grid {
grid-template-columns: repeat( 2, 1fr );
}
}

@media (min-width: 1024px) {
.display-posts-listing.grid {
grid-template-columns: repeat( 3, 1fr );
}
}

@johnfdrake

Maybe you can contact to the respective plugin developer. They might be able to assist you with this more properly than we could.

Thanks.

Ahhhh I managed to crack it myself. Phew! Thank you so much for your guidance. I am pasting the CSS below in case anyone else encounters this problem.

Cheers!

/* Grid style */
.display-posts-listing.grid {
display: grid;
grid-gap: 16px;
}

.listing-item {
justify-self: center;
}

.title {
text-align: center;
}

.display-posts-listing.grid .title {
display: block;
}

.display-posts-listing.grid img {
display: block;
max-width: 100%;
height: auto;
}

@media (min-width: 600px) {
.display-posts-listing.grid {
grid-template-columns: repeat( 2, 1fr );
}
}

@media (min-width: 1024px) {
.display-posts-listing.grid {
grid-template-columns: repeat( 3, 1fr );
}
}

@johnfdrake

Do let us know if you have any further queries regarding the theme.

Thanks.