8

I've found css code that makes my promoted link tiles smaller. But the images inside aren't always resized. Some images are resized and some aren't i don't get why.

This is how it looks: enter image description here

This is the code i've found. It wraps all the tiles and make them smaller. (110px)

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

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

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

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

ul.ms-tileview-tile-detailsListMedium {
height: 100px;
padding: 0;
}

li.ms-tileview-tile-descriptionMedium {
font-size: 11px;
line-height: 16px;
}

div.ms-tileview-tile-titleTextMediumExpanded, div.ms-tileview-tile-titleTextLargeCollapsed, div.ms-tileview-tile-titleTextLargeExpanded {
padding: 3px;
}

div.ms-tileview-tile-titleTextMediumCollapsed {
background: none repeat scroll 0 0 #002E4F;
font-size: 12px;
line-height: 16px;
min-height: 36px;
min-width: 97px;
padding-left: 3px;
position: absolute;
top: -36px;
}

li.ms-tileview-tile-descriptionMedium {
font-size: 11px;
line-height: 14px;
padding: 3px;
}

.ms-promlink-header{
display:none;
}
 .ms-promlink-body {
      width: 550px;
}
</style>

Edit: It isn't important for the 'publish to Office' and 'Learn to use the developer site' tiles. Apparently they are on a sprite sheet and i won't use spritesheets in my final code but individual images. So i'm wondering why the only image 'Test my pics' is cropped strangely. In code it appears it's height is 150px and width is 100. When all the others are 100x100px.

EDIT2: God dammit i'm stupid, i just added in my css to fix this

#promotedlinkID img{
right: 0px;
width: 100px;
height: 100px;
}
  • A tips is to save your images as .png files, this way the background will be transparent if you are using shaped images. – Christoffer Nov 26 '15 at 9:52
  • @user19952 The "Go" images are all png mages. And it isn't transparent. but it's not important. I won't use transparent images it was just for testing purpose and not the source of my question :p – Tanaka Nov 26 '15 at 9:54
  • If you solved your problem, please post it as the answer and accept it. That will help other users with the same problem. – CigarDoug May 17 '18 at 9:56
1

Just a tidy up. The answer was posted by @Tanaka

#promotedlinkID img{
right: 0px;
width: 100px;
height: 100px;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.