Code not saving when trying to wrap promoted tiles in SharePoint Online - sharepoint

Question

Apologies for another question re this, but I've tried so hard to get this working (I'm fairly new to SharePoint, don't have extensive coding knowledge, but know HTML and generally alright at trouble shooting).
We are using SharePoint online and we have SharePoint Tiles. We have recently added a few more tiles and it's obviously not wrapping these tiles, thus having to scroll right to access some.
I have found the code for wrapping the tiles here and when editing the page source, it appears to be working... until I save it. The code I put in is stripped out when I next go to the content editor.
I've read a few pages on it and have tried things such as the content editor web part, but for the life of me cannot get it to work.
If anyone would know if there's a step to step guide to ensure wrapped tiles are saved, I may be able to get it to work.
Any help is greatly appreciated.
If it changes anything, we use SharePoint online that is part of our Office 365 account.

Answer 1

Add the following code into script editor web part in the page.
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// Update this value to the number of links you want to show per row
var numberOfLinksPerRow = 6;
// local variables
var pre = "<tr><td><div class='ms-promlink-body' id='promlink_row_";
var post = "'></div></td></tr>";
var numberOfLinksInCurrentRow = numberOfLinksPerRow;
var currentRow = 1
// find the number of promoted links we're displaying
var numberOfPromotedLinks = $('.ms-promlink-body > .ms-tileview-tile-root').length;
// if we have more links then we want in a row, let's continue
if (numberOfPromotedLinks > numberOfLinksPerRow) {
// we don't need the header anymore, no cycling through links
$('.ms-promlink-root > .ms-promlink-header').empty();
// let's iterate through all the links after the maximum displayed link
for (i = numberOfLinksPerRow + 1; i <= numberOfPromotedLinks; i++) {
// if we're reached the maximum number of links to show per row, add a new row
// this happens the first time, with the values set initially
if (numberOfLinksInCurrentRow == numberOfLinksPerRow) {
// i just want the 2nd row to
currentRow++;
// create a new row of links
$('.ms-promlink-root > table > tbody:last').append(pre + currentRow + post);
// reset the number of links for the current row
numberOfLinksInCurrentRow = 0;
}
// move the Nth (numberOfLinksPerRow + 1) div to the current table row
$('#promlink_row_' + currentRow).append($('.ms-promlink-body > .ms-tileview-tile-root:eq(' + (numberOfLinksPerRow) + ')'));
// increment the number of links in the current row
numberOfLinksInCurrentRow++;
}
}
});
</script>
We can also use CSS style below in script editor web part in the page to achieve it.
<style>
.ms-promlink-body {
width: 960px;
}
</style>