CSS issue : Not working my changes

HasanMerkit

I want use this css code for fix some issues:

.WelcomeHero{display:none;}
@media (min-width: 1100px)
{
    --flarum-screen: desktop-hd !important;
}
@media (min-width: 1040px) and (max-width: 1099.98px)
{
    --flarum-screen: desktop !important;
}
@media (min-width: 880px) and (max-width: 1039.98px)
{
    --flarum-screen: tablet !important;
}
@media (max-width: 880px)
{
    --flarum-screen: phone !important;
}

But @media commands not work reason since it is above the main style code.
If i adding this lines to assets/forum.css file works fine but my changes deleted by clearing flarum cache.

murdocklawless

modify the forum.css file and save as custom-forum.css and send it to assets directory.

then install html head items,

composer require ianm/html-head:"*"

activate it and instert these;

the expression in red rectangle is going to be different for you. open the main page of your site and press F12, you will see your forum.css?v= line in "head" title and you will create your html head items with this.

save them and go.