Sharepoint Online - Custom CSS in Content Editor web part saves are overwritten

Question

I'm fairly new to sharepoint customisation so have been struggling reading over some threads. I have looked at the following Posts by have been unable to figure out where / what needs to be edited to get this working.

I'm trying to add custom CSS to edit my home page where promoted links are stored in order to make them smaller (This is so that it scales better when viewing on an ipad).

I'm following this process but I can not seem to get my customisation to save after pressing the save button - It just reverts back to how it was.

• Navigate to Home page
• Press the Edit button
• Add My promoted links web parts to the page
• Save the page

At this stage the site is fine - I now want to make further customisation in order to resize the promoted links I have just added to the home page.

• Press Edit to edit the home page
• Add a Content Editor Webpart at the top of the page (Insert > Media and Content > Content Editor > Add
• Click onto the Content editor web part I have just added
• Click 'Edit Source'
• Add the code between the and Tags - (Link to the CSS I'm added is in the comment below)
• Press 'OK' to save the source code I have entered

• Looking at the site the Promoted links have now been resized to the size I want them

  • Press the Save button

  • After pressing save and viewing my home page the promoted links have gone back to the same size as they were before?

Does anyone know why this isn't saving?

Please let me know if you need any further information or screenshots.

Kind regards Steven

Answer 1

apply your css using java script and use script editor for applying the script on a page

Answer 2

changing the promoted links is one of the tough task because most of the element inside it has inline styles, which can be overridden by only one way i.e. css !important mark, and when you change the width/height of promoted links, the animation stops working. It is not advised to customize promoted links via css. You can take advantage of SharePoint JSLink/CSR to achieve what you want to via CSS override.

If the above, is not your requirement then you can apply following css to get the desired size. I am using 100px box, you can provide your desired size.

.ms-promlink-body > div {
    width: 100px !important;
    height: 100px !important;
}

.ms-promlink-body > div > div{
    width: 90px !important;
    height: 90px !important;
}

.ms-promlink-body > div > div > a span, .ms-promlink-body > div > div > a div{
    width: 90px !important;
    height: 90px !important;
}

.ms-promlink-body > div > div > a div{
    top: 60px !important;
}

But this will stop animation part as all the css is marked as important. The output will look like following:

Answer 3

Please note that I was able to get this to work in editor mode and not have to create a .css page that I linked to CEWP to. New to SharePoint development and had some issues with what source code needed to be changed.

Using the Following vid I was able to resolve this issue: https://www.youtube.com/watch?v=gcWX3N4nWyw

I believe there might be some problems when ending the source code of the home.aspx page - Changes are seen as unsafe so are removed when I Save them whilst editing in browser.

By creating a CSS page in SharePoint Designer 2013 with the relevant CSS I wish to add , adding a Content Editor Web Part, Adding content to the webpart, editing the source code, and linking this code to the .css page I created, and then saving these changes - This is now working.

Some of the text is clipping a bit so there is some additional changes that I need to make but I should be able to do this/