Formatting the layout of multiple promoted links

Question

I am working on a page with multiple Promoted Links and using an inserted table i can organise where on the page i'd like them.

The problem occurs when I add the javascript to stack them vertically.

If there was only one Promoted Link on the page, the vertical stacking script works fine. When I start adding more Promoted Links in to the relevant table cells, they appear to blend in to one of the cells looking like one large Promoted Link but with the Title remaining in the cell it was originally placed...

Please help!

Answer 1

Instead of using jQuery, you could try a CSS-only solution, tinkering with nothing more than the width. Might give you better control over the promoted links.

<style>
/*display rows of 3 items*/
.ms-promlink-body {
      width: 480px;
}
</style>

Easy way to display promoted links (tiles) on multiple rows

If you need to target a specific promoted links list, you can do it with the web parts ID.

<style type="text/css">
#WebPartWPQX .ms-promlink-body {
      width: 480px;
}
</style>

In the class #WebPartWPQX, X should be a number which you can find by using F12 developer tools ( Press F12 in the browser ) and click on the list to find the web part ID. So it should be WebPartWPQ1 as a example.