XF 2.1 Making Custom CSS Per Page Node?

[Arnox]

I've made a new Page node, but when I try to write custom CSS for it in the Template HTML box, XF just seems to want to ignore it completely. Even if I specify <xf:css>, it still ignores it. I don't know what to do from here.

EDIT: Here's my current code:

<xf:widget key="portal_view_new_posts" />

<xf:widget key="forum_overview_new_posts" />

<xf:widget key="siropu_chat" />

<xf:widget key="gaming_events" position="sidebar" />

.p-body-pageContent [data-widget-definition="portal_view_new_posts"]
{
    display: none;
}
@media (max-width: @xf-responsiveWide)
{
    .p-body-pageContent [data-widget-definition="portal_view_new_posts"] { display: block; }  
    .p-body-pageContent [data-widget-definition="forum_overview_new_posts"] { display: none; }
}

 

[Arnox]

FIXED IT. Turns out I made two mistakes. For one, you do not use data-widget-definition. You instead use data-widget-key! Unfortunately though, while that got the CSS working in general, it still was not recognizing mobile devices and desktop devices apart.

The second problem was, weirdly enough, with @xf-responsiveWide. Apparently that didn't seem to be working, or it was feeding it the wrong value. Instead, just to test, I put in a manual value of 900px and this finally, blessedly fixed everything. Oh, also, the widgets were put in the wrong order. This is the final code.

<xf:widget key="portal_view_new_posts" />

<xf:widget key="forum_overview_new_posts" />

<xf:widget key="siropu_chat" />

<xf:widget key="gaming_events" position="sidebar" />

<xf:css>
    .p-body-pageContent [data-widget-key="forum_overview_new_posts"]
    {
        display: none;
    }
    @media (max-width: 900px)
    {
        .p-body-pageContent [data-widget-key="forum_overview_new_posts"] { display: block; }   
        .p-body-pageContent [data-widget-key="portal_view_new_posts"] { display: none; }
    }
</xf:css>