In SharePoint Online, I have a home page on a team site on which I have added a promoted links app part.

Following a few posts, I also added a media script part and cut and pasted code to set the width to four tiles and then wrap.

Everything displays as I wish, except

The tiles don't wrap at all!

Any suggestions?

  • Hello Larry, could you please add a screenshot to can help you faster! Dec 8, 2018 at 7:36

1 Answer 1


Add the following code into a script editor web part to achieve it.

<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {  
    // Update this value to the number of links you want to show per row
    var numberOfLinksPerRow = 4;

    // local variables
    var pre = "<tr><td><div class='ms-promlink-body' id='promlink_row_";
    var post = "'></div></td></tr>";
    var numberOfLinksInCurrentRow = numberOfLinksPerRow;
    var currentRow = 1
    // find the number of promoted links we're displaying
    var numberOfPromotedLinks = $('.ms-promlink-body > .ms-tileview-tile-root').length;
    // if we have more links then we want in a row, let's continue
    if (numberOfPromotedLinks > numberOfLinksPerRow) {
        // we don't need the header anymore, no cycling through links
        $('.ms-promlink-root > .ms-promlink-header').empty();
        // let's iterate through all the links after the maximum displayed link
        for (i = numberOfLinksPerRow + 1; i <= numberOfPromotedLinks; i++) {
            // if we're reached the maximum number of links to show per row, add a new row
            // this happens the first time, with the values set initially
            if (numberOfLinksInCurrentRow == numberOfLinksPerRow) {
                // i just want the 2nd row to
                // create a new row of links
                $('.ms-promlink-root > table > tbody:last').append(pre + currentRow + post);
                // reset the number of links for the current row
                numberOfLinksInCurrentRow = 0;   
            // move the Nth (numberOfLinksPerRow + 1) div to the current table row    
            $('#promlink_row_' + currentRow).append($('.ms-promlink-body > .ms-tileview-tile-root:eq(' + (numberOfLinksPerRow) + ')'));    
            // increment the number of links in the current row

enter image description here

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.