johnfdrake

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 );
}
}

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 );
}
}

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!

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/