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!


1 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.

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

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;

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.

  • Perfect. Well almost... I forgot to mention i'd like to keep 1 Promoted Link horizontal across the top of the page. All the verticals are under the Horizontal. Sorry!
    – SimonW
    Commented Jun 2, 2015 at 13:52
  • See my updated answer Commented Jun 2, 2015 at 14:03
  • Glad it worked! :) Commented Jun 2, 2015 at 14:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.