Information consultant and Office 365 enthousiast

We have all been there, we want to show some Promoted links on a SharePoint Online page. But we want it to show on multiple rows, which you cannot do out-of-the-box.

A quick search on the internet later you find yourself adding a dozen of lines of jQuery code on your page. But there seems to be a much easier and quicker way of getting the same result, with CSS!

We will limit the width of the Promoted liks body. With every tile being as wide as 160px, we need to set the body width to a plurality of that. We will also hide the arrows to scroll through the Promoted links, as we won’t need them anymore.

That’s it, two lines of CSS.

Add the following code to a stylesheet you are using in your design:

/* display rows of 3 items */
.ms-promlink-body {width: 480px;}
/* hide the arrows when you have more items than viewable */
.ms-promlink-header{display:none;}