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.

SharePoint Online Promoted Linked Multiple Rows

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

Or embed the following jQuery-code on the page:

SharePoint Online Promoted Linked Multiple Rows

SharePoint Online Promoted Linked Multiple Rows

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
/* display rows of 3 items */
$(".ms-promlink-body").attr("style", "width: 480px;");
/* hide the arrows when you have more items than viewable */
$(".ms-promlink-header").hide();
});
</script>

The result is shown like this:
SharePoint Online Promoted Linked Multiple Rows