Promoted Links – Change amount per row and next page icon

While testing promoted links I came across an issue whereby I had too many links on a row and was displaying an arrow to view the rest of the icons which looked fairly awful. A way around this was to use a Script Editor WebPart to modify the page layout through CSS.

  1. On the page displaying the Promoted Links, click the cog and go edit page.
  2. Add the Script Editor WebPart which can be found under ‘Media and Content’.
  3. On the right side of the Script Editor WebPart you will see ‘EDIT SNIPPET’, click this and insert the code below into it.
    The first part of the code limits the amount of links per row, each tile has a default of 160px, so depending on the amount per row its 160*… The second part hides the arrows if there’s more items that you are currently unable to see.

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

    <style>
    /*hide the arrows when you have more items than viewable*/
    .ms-promlink-header{
    display:none;
    }
    </style>