Responsive Resizing of Promoted Links

Posted on by SharePointCSS.com

Responsive Promoted Links App Part

So, previously I wrote about changing the look and feel of the SharePoint Promoted Links app.  If you have modified your promoted links as listed in this article, you’ll see something like this:

Maximized window view:

The problem is that if you resize the window, your tiles get cut off– not a big deal if you have a large enough monitor, but if you’re on a tablet, you’ll lose some links on the page.

Resized window with tiles cut-off:

 

If you modify the max-width property, and set the width to auto, you get a nice little responsive design-like feel and behavior out of the promoted links.

All tiles shown with resized window:

Here’s the specific code I’m talking about:

.ms-promlink-body {
height: 200px;
max-width:850px;
min-width:215px:
width: auto;
 
}

 

Go here for the full source code of the promoted links modifications.

Hide the Ellipses on an App Part

Posted on by SharePointCSS.com

Hide the Ellipses on an App Part

The ellipses are cool.  If you click them you get a nice little menu with actions you can take on the item or file in the same row.  sometimes, you just want to show the content, so you may want to hide them.

Want to hide them?

Drop this code in:

<style>
 
.ms-list-itemLink {
    display: none;
}
</style>

Hide App Part Header Row

Posted on by SharePointCSS.com

Hide the Header Row of an App Part

Here’s a standard Announcement App Part

 

The header row contains the column headers in the view.  In some cases, you may want to hide this.

Want to hide it?

Drop this code in:

/* Hide Header Row */
 
.ms-vh, .ms-vh2, .ms-vh-icon, .ms-vh2-nofilter-icon, .ms-viewheadertr .ms-vh-group, .ms-vh2-nograd, .ms-vh3-nograd, .ms-vh2-nograd-icon, .ms-ph, .ms-pickerresultheadertr {
     display: none;
}