1

So I’m apparently the winner of the SharePoint admin hat since our last guy left.

I just fixed an issue where tiles were all jamming up on each on our home page, but now since there are 14 of them the user has to scroll horizontally to see them all depending on their resolution.

Could someone explain to me how I could make them like 70% of their size?

Appreciate your time.

Ravindra Reddy
  • 47
  • 8
Ben L
  • 21
  • 2

1 Answers1

0

There are few options you can pick.

  • Reduce the size of the tiles by half
  • Disable horizontal scrolling
  • Both of the above

I can't find the sources for this (not my code), but I have both options stored safely here so I will post them. Sources added.

The files are too big to share here so I will place external links.

PromotedLinksHalfSize.dwp (CEWP)

SOURCE (other sizes available)

This is done through some CSS styles.

You can add them in any way you like; in here they are exported as a webpart.

<?xml version="1.0" encoding="utf-8"?>
<WebPart xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://schemas.microsoft.com/WebPart/v2">
  <Title>Promoted Links Half Size</Title>
  <FrameType>None</FrameType>
  <Description>Allows authors to enter rich text content.</Description>
  <IsIncluded>true</IsIncluded>
  <ZoneID>wpz</ZoneID>
  <PartOrder>0</PartOrder>
  <FrameState>Normal</FrameState>
  <Height />
  <Width />
  <AllowRemove>true</AllowRemove>
  <AllowZoneChange>true</AllowZoneChange>
  <AllowMinimize>true</AllowMinimize>
  <AllowConnect>true</AllowConnect>
  <AllowEdit>true</AllowEdit>
  <AllowHide>true</AllowHide>
  <IsVisible>true</IsVisible>
  <DetailLink />
  <HelpLink />
  <HelpMode>Modeless</HelpMode>
  <Dir>Default</Dir>
  <PartImageSmall />
  <MissingAssembly>Cannot import this Web Part.</MissingAssembly>
  <PartImageLarge>/_layouts/images/mscontl.gif</PartImageLarge>
  <IsIncludedFilter />
  <Assembly>Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c</Assembly>
  <TypeName>Microsoft.SharePoint.WebPartPages.ContentEditorWebPart</TypeName>
  <ContentLink xmlns="http://schemas.microsoft.com/WebPart/v2/ContentEditor" />
  <Content xmlns="http://schemas.microsoft.com/WebPart/v2/ContentEditor">
    <![CDATA[<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 */
  div.ms-tileview-tile-content > a > img {
    width: 100% !important;
    height: 100% !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><br/>]]>
  </Content>
  <PartStorage xmlns="http://schemas.microsoft.com/WebPart/v2/ContentEditor" />
</WebPart>

MultilinePromotedLinks (jslink)

SOURCE (web archive, link is down)

to be refereced in the webpart's jslink property as:

~sitecollection/_layouts/15/sp.init.js|~sitecollection/_layouts/15/yourpath/MultilinePromotedLinks.template.js

(update link inside as well)

Will update if I find the sources.

This is for SharePoint 2013, but might work for others.

Tiago Duarte
  • 5,477
  • 2
  • 21
  • 43