Top Posts Image Grid Formatting

You can customize the look of each element on your site with Custom CSS. You can add that CSS to your theme stylesheet, or to your custom CSS editor available under Appearance > Edit CSS in your dashboard.

To get started, you could use your browser inspector to look at how the grid is built in wp-tiles. Once you understand how each element is styles, you can copy that CSS over to your theme stylesheet or your custom CSS editor, after changing the selectors to the Top Posts Widget selectors.

I hope this helps.

Hi Jeremy, thanks for the quick response! And thanks for an amazing plug-in!

Yes, I’ve done the ‘inspect element’ in the past, was hoping for some amazing insights from people more experienced than myself. I will do some more playing around.

Buried in my original question was a comment about inconsistent padding between the images in the grid. Is it possible for this to be reviewed?

Straight out of the box, the spacing is
– between 1st and 2nd tile – space
– between 2nd and 3rd – no space
– between 3rd and 4th – space
– between 4th and 5th – no space

Output looks perfect on small screen (two tiles across), but any bigger screen-size the margin differences is noticeable.

I’m not sure if this is a new issue or not, will change topic as unresolved to be safe, but feel free to change back if appropriate.

That’s indeed the expected result. The Top Posts widget was built to display 2 images at a time in the grid. Here is the default display:

https://i.wpne.ws/fW2N

You could change that by adding a margin around all posts, like so:

.widget_top-posts .widgets-grid-layout .widget-grid-view-image a {
	margin: 0 5px;
	padding: 0;
}

I hope this helps.

Yes, helps a lot. Thanks for your quick response!