Resize Tiles for Promoted Links List SharePoint Online

We all have those moments where we need to do something on our design for SharePoint Online sites. I love promoted tiles because they give us a quick easy way to navigate through the wonderful things we build in our sites for people to consume. You can watch my video on how to create the app here – Create Promoted Links App.

By default they are large and I am ok with that when you don’t need the space for other items. However, when you are trying to get the benefit of the tiles, but need a smaller size you can you use the following code to make them smaller. You can read more from Ciara McCarthy‘s post at BrightWork for this information – read the original post here.

Embed this code on the page (that has the tiles) and happy resizing. You can make further adjustments to the script to get just what you want. Again if you need more on the step by step look her post.


<style type="text/css">
/* The height of the Promoted Link Webpart */
.ms-promlink-body {
     height: 100px;
}

/*  Tile and border size. Delta between ms-tileview-tile-root and size of the promoted link tiles is the space between tiles  */
.ms-tileview-tile-root {
     width: 105px! important;
     height: 105px !important;
}

/*  size of the promoted link tiles */
.ms-tileview-tile-content, .ms-tileview-tile-detailsBox {
     width: 100px !important;
     height: 100px !important;
}

/*  size of the image within the promoted link tile */
.ms-tileview-tile-content > img {
     width: 100%!important;
     height: 100%!important;
}

/* Changes the Promoted Link Title when you hover over it*/
.ms-tileview-tile-detailsListMedium {
     font-weight: bold;
     height: 100px;
     padding: 4px 7px 7px;
     font-size: 12px;
     line-height: 14px;
}

/* Changes the Promoted Link Description when you hover over it*/
.ms-tileview-tile-descriptionMedium {
     font-weight: normal;
     padding-top: 10px;
     font-size: 11px;
     /*  If you want to change the font size, change above */
}

/*  Remove this if you only what to show the images and not the text */
/*  Adjust the text in the Collapsed Promoted Link */
.ms-tileview-tile-titleTextMediumCollapsed {
     font-weight: normal;
     background-color: rgba(0, 0, 0, 0.6);
     width: 100px;
     height: 40px;
     position: absolute;
     top: -20px;
     left: 0px;
     text-align: center;
     vertical-align: middle;
     font-size: 11px;
     /*  If you want to change the font size, change above */
     line-height: 20px;
     word-wrap: break-word;
}

</style>

***This code has had a slight correction from the original post because the image behind the tiles didn’t adjust or scale appropriately***

Correction was found from here: https://sharepoint.stackexchange.com/questions/154770/recommended-height-and-width-for-promoted-links-background-images

and specifically the tile image section was modified to be this (its already corrected above).

.ms-tileview-tile-content img {
    width:100px!important;
    height:100px!important;}

 

×

Comments are closed.