Change the size of promoted links to 100 x 100 (also 200 x 300)

this code will help you change the size of the promoted links icons to 100 x 100.
Source: https://sharepoint.stackexchange.com/questions/86743/change-the-default-tile-size-in-sharepoint-2013

Add in this CSS code:

<style type="text/css">

  /*  tile row height */
  div.ms-promlink-body {
    height: 100px;
  }

  /*  tile dimensions, including inter-tile margin */
  div.ms-tileview-tile-root {
    width: 110px !important;
    height: 110px !important;
  }

  /*  tile and title( + description) overlay dimensions */
  div.ms-tileview-tile-content, div.ms-tileview-tile-detailsBox {
    width: 100px !important;
    height: 100px !important;
  }

  /*  tile background image dimensions */
  .ms-tileview-tile-content > a > img {
    width: 100px !important;
    height: 100px !important;
  }

  /*  title and description text  */
  ul.ms-tileview-tile-detailsListMedium {
    height: 100px;
    padding: 4px 7px 7px;
    font-size: 11px;
    line-height: 14px;
  }

  /*  description text class  */
  li.ms-tileview-tile-descriptionMedium {
    padding-top: 10px;
    font-size: 11px;
  }

  /*  title text when description not shown  */
  div.ms-tileview-tile-titleTextMediumCollapsed {
    background-color: rgba(0, 0, 0, 0.6);
    width: 86px;
    height: 29px;
    position: absolute;
    top: -33px;
    left: 0px;
    padding: 4px 7px 0px;
    font-size: 11px;
    line-height: 13px;
  }
</style>

This CSS will make your tiles 200x300px, and stretch the background to fill the tile (tested on SharePoint 2016)

<style type="text/css">

  /*  tile row height */
  div.ms-promlink-body {
    height: 200px;
  }

  /*  tile dimensions, including inter-tile margin */
  div.ms-tileview-tile-root {
    width: 310px !important;
  }

  /*  tile and title( + description) overlay dimensions */
  div.ms-tileview-tile-content, div.ms-tileview-tile-detailsBox {
    width: 300px !important;
 
  }

  /*  tile background image dimensions */
  .ms-tileview-tile-content > a > img {
    width: 300px !important;
  }

  /*  title and description text  */
  ul.ms-tileview-tile-detailsListMedium {
    padding: 4px 7px 7px;
    font-size: 24px;
    line-height: 32px;
  }

  /*  description text class  */
  li.ms-tileview-tile-descriptionMedium {
    padding-top: 10px;
    font-size: 13px;
    line-height: 16px;
  }
  
  img.ms-positionRelative{
    position: absolute;
    left: 0px;
    width: 100% !important;
    height: 100% !important;
  }

</style>

Share on Google Plus

About Tom DeMeulenaere

Highly accomplished information technology professional with extensive knowledge in System Center Configuration Manager, Windows Server, SharePoint, and Office 365.