Good day!

I updated my Joomla site from 4.4 to 5.3.1.

My homepage displays Articles -Category Blog - Alternative

It shows two articles, but one of them has a title with a long word in it, and it wont fit on the screen on mobile browser, making the page scrollable horizntally and taking the title text out of the frame.

I tried to fix it via custom.css



@media (max-width: 768px) {
.page-header h2 {
overflow-wrap: break-word;
word-break: break-word;
white-space: normal !important;
}
}


Even added a debug line:

body { background: pink !important; }


However, none of it works

What am i missing?

Cheers



EDIT:

I even tried adding:

<style>
body { background: yellow !important; }
@media (max-width: 768px) {
.page-header h2,
.blog-item h2,
.item-page h2,
article h2 {
overflow-wrap: break-word !important;
word-break: break-word !important;
white-space: normal !important;
max-width: 100% !important;
}
}
</style>


directly into the /templates/j51_hayley/index.php

It's still not working


EDIT 2:

Correction - adding this directly into the index.php works:

<style>
@media (max-width: 768px) {
.page-header h2,
.blog-item h2,
.item-page h2,
article h2 {
overflow-wrap: break-word !important;
word-break: break-word !important;
white-space: normal !important;
max-width: 100% !important;
}
}
</style>

Just the debugging code:
body { background: yellow !important; }
didnt work (i dont need it)


But the original problem remains - custom.css is not loaded.