XF 2.0 extra.less | responsive: how to set settings only for specific browsers in css?

[Marcus]

For each responsive Class (.visibleResponsiveFull Responsive design how-to from Brogan) want to set different css for .node-subNodeFlatList How can I do that? Ideal would be

.visibleResponsiveFull .node-subNodeFlatList  { css settings ... }

Html has lots of classes but it does not have responsive classes

has-js template-forum_list has-blobconstructor has-blob-constructor has-cors has-geolocation has-history has-postmessage has-svg has-websockets has-passiveeventlisteners has-webworkers has-no-contextmenu has-hashchange has-pointerevents has-audio has-canvas has-canvastext has-contenteditable has-emoji has-video has-webgl has-rgba has-placeholder has-hsla has-supports has-no-hiddenscroll has-no-touchevents has-fontface has-generatedcontent has-textshadow has-pagevisibility has-performance has-cssanimations has-csscolumns has-csscolumns-width has-csscolumns-span has-csscolumns-fill has-csscolumns-gap has-csscolumns-rule has-csscolumns-rulecolor has-csscolumns-rulestyle has-csscolumns-rulewidth has-csscolumns-breakbefore has-csscolumns-breakafter has-csscolumns-breakinside has-flexbox has-flexwrap has-cssreflections has-csstransforms has-csstransforms3d has-csstransitions has-indexeddb has-indexeddb-deletedatabase has-pointer-nav

 

[Chris D]

If you ever see a guide written for XF1 and it contains reference to any specific HTML code or CSS or class names the likely 100% of the time, that code will have changed.

Even so, those class name in XF1 were only ever applied to elements manually, they never actually existed anywhere in the code. There are similar ones in XF2.

Rather than base it on an older reference, what are you actually wanting to achieve? Ensure the sub node list is not hidden on narrow displays?

 

[Marcus]

In extra.less I want to change the .subNodeFlatlist css class depending on whether a user browses with a wide window or narrow window (mostly phone).

I could hide subforums on phones, and display more content on devices with wider screen.

 

[Marcus]

I want to use actually something like this in extra.less, but @media does not work there.

    @media (max-width:@maxResponsiveWideWidth) {
        .node-subNodeFlatList > li  {
            color:red;
        }
    }

 

[Chris D]

It certainly will do. That’s not the correct style property for the responsive settings.

Search through less templates for '@media' and you should see a bunch of examples.

 

[Marcus]

This does not work in extra.less and its xf2 syntax

@media (max-width: @xf-responsiveWide)
{
        .node-subNodeFlatList > li  {
            color:red;
        }
}

 

[Chris D]

Try:

@media (max-width: @xf-responsiveWide)
{
        .node-subNodeFlatList .subNodeLink  {
            color:red;
        }
}

This applies the colour to the relevant link element.

It became apparent looking in the element inspector in the browser that the media query rules were being applied, but they were not taking effect because the text colour should apply to the link and not the list item.

 

[Marcus]

Thank you for helping me and taking the time. It works wonderful here now.