• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

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

Marcus

Well-known member
#1
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
Code:
.visibleResponsiveFull .node-subNodeFlatList  { css settings ... }
Html has lots of classes but it does not have responsive classes
Code:
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

XenForo developer
Staff member
#2
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

Well-known member
#3
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.
 
Last edited:

Marcus

Well-known member
#4
I want to use actually something like this in extra.less, but @media does not work there.

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

Chris D

XenForo developer
Staff member
#5
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

Well-known member
#6
This does not work in extra.less and its xf2 syntax

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

Chris D

XenForo developer
Staff member
#7
Try:
Less:
@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.