Increase tile size of promoted link in Share point 2013

Question

I create an app using the Promoted Links in Sharepoint 2013. I chose to do this because the feature has the awesome hover effect and is easy to customize the image.

The issue is that I have been trying to figure out how to change the tile sizes. They are awesome the way they are, however I just need them smaller. I still want the hover effect as well and for the text to match the same ratio as the tile. I have tried web zones, I have done each ID but with no luck. Please help.

Same question asked before: change the default tile size in Sharepoint 2013

But this was for decrees the size for tile.

check this http://social.technet.microsoft.com/wiki/contents/articles/26522.everything-about-promoted-links-in-sharepoint-2013-change-size-wrap-view-handle-click-event-using-jquery.aspx — Waqas Sarwar MVP, Apr 24 '15 at 12:19
Just take the css from your example's answer (http://sharepoint.stackexchange.com/questions/86743/change-the-default-tile-size-in-sharepoint-2013) and apply your desired size — Mx., Apr 24 '15 at 12:38

Mx. · Accepted Answer · 2015-04-29T09:47:23.430

3

Try to work with browser tools to fiddle with CSS - press F12 to access the tools in common browsers.

Here's your CSS:

<style type="text/css">
        div.ms-promlink-body {
            height: 200px;
        }

        div.ms-tileview-tile-root {
            height: 210px !important;
            width: 210px !important;
        }

        div.ms-tileview-tile-content, div.ms-tileview-tile-detailsBox,  div.ms-tileview-tile-content > a > div > span {
            height: 200px !important;
            width: 200px !important;
        }            

        div.ms-tileview-tile-detailsBox{
            margin-top:40px;
        }

        div.ms-tileview-tile-content > a > div > img {
            max-width: 100%;
            width: 100% !important;
        }

        div.ms-tileview-tile-content > a > span {
              margin-left: 25px;
              margin-top: 25px;
        }

        ul.ms-tileview-tile-detailsListMedium {
            height: 200px;
        }

        .ms-tileview-tile-titleMediumCollapsed {
            height: 50px;
        }
</style>

enter image description here

edited Apr 29 '15 at 09:47

answered Apr 24 '15 at 13:41

Mx.

3,323
1
20
41

Thanks Mx. for you reply. I tried it but no working as expected at my side. I have two promoted Link on same page. For first, I decrees the tile size and look good but another whose tile need to increase is not working. – user2493287 Apr 24 '15 at 13:57
@user2493287 This works well on OOTB tiles. I cant help you as i dont know whats wrong in your environment. – Mx. Apr 24 '15 at 14:56
@Max, Now, I can set image size as expected but problem with the shadow not coming properly on Expand and Collapsed. Got good link: https://social.technet.microsoft.com/Forums/sharepoint/en-US/ab960b52-8013-469a-8fd5-05a7230e6337/sharepoint-2013-tile-size-css- This link tell us that we cant change top position of shadow as it is hard-coded. – user2493287 Apr 28 '15 at 10:42
@Max, I used your css, but it is showing half shadow on tile which is my main problem now. – user2493287 Apr 28 '15 at 10:49
@user2493287 as I said - this works OOTB. When this isn't working for you there is something that applies wrong styles to the tiles. – Mx. Apr 28 '15 at 11:03
@Max, I can see attached image at your answer. Its showing shadow over half image. I want to solve it. I don't think it working at your end as well. Image is showing the shadow problem. – user2493287 Apr 29 '15 at 09:15

Increase tile size of promoted link in Share point 2013

1 Answers1