The Page style (custom CSS) box on your homepage takes up to 20,000 characters. Most styles never come close. But a long one can be under that limit and still lose the rules at the end. This guide explains why, and what to do about it.

Why a style gets longer after you save it

Your CSS only ever changes your own homepage. To make sure of that, the site puts .jm-profile-page in front of every selector before it is used. So

h1, h2, h3 { color: teal }

becomes

.jm-profile-page h1, .jm-profile-page h2, .jm-profile-page h3 { color: teal; }

Each selector grows by about 17 characters. The cleaned style may be up to 60,000 characters. A style with long lists of short selectors can pass that even though what you typed was under 20,000.

What happens past the limit

• Rules are kept in order, from the top, until the next one would not fit. Everything after that is left out, so it is always the end of your style that goes.
• A rule is never cut in half. An @media block counts as one rule: it is kept or left out as a whole.
• Nothing else changes: the rules that fit work exactly as before.

How the editor tells you

Under the CSS box, the note that lists what was removed also says, for example, Removed from your page style: 128 rules past the size limit. It gives a count, not which rules. To see exactly where the style stops, open Custom CSS in the simple editor on the same page: after you save, What will be applied shows the cleaned style, and its last rule is the last one that fit.

Making a long style fit

• Put what matters first. Rules near the top are the ones that are kept.
• Use a class instead of long lists. Ten elements listed one by one get ten prefixes; one shared class gets one.
• Delete rules you no longer need, and repeated rules that set the same thing twice.

When the note no longer mentions the size limit, the whole style fits.

What else the safety check removes, and where to write your CSS: Style your homepage with CSS. More guides at https://jmtechpower.com/articles.