Make promoted links responsive

Question

I have managed to add some JavaScript that I found here and almost get my promoted links to be responsive.

The only issue is that when my screen gets below a resolution of approximately 900px the promoted links end up on a single line each.

I have seen the answer to the question asked within Stack Overflow but do not understand where it is I need to add the "!important" tag in order to override the SharePoint CSS which appears to be causing this.

Could anyone please advise on how to fix this.

JavaScript:

$(document).ready(function () {
$('#promotedlinksbody_WPQ7').removeClass('ms-promlink-body');
$('#promotedlinksbody_WPQ7').addClass('row container-fluid');
$('#promotedlinksbody_WPQ7').children().removeClass('ms-tileview-tile-root');
$('#promotedlinksbody_WPQ7').children().addClass('col-md-4 tilesresponsive');

Answer 1

Use this link to download the js:

http://www.rbradbrook.co.uk/blog/2013/08/11/display-promoted-links-multiple-lines/

Or if unavailable the page has been archived at the Internet Archive along with the code if you search for "Download JavaScript" on that page.

I didn't need to change anything in the code. Just save it, publish it and add the js-link in your webpart properties.

My location is: ~sitecollection/_catalogs/masterpage/display templates/MultilinePromotedLinks.js