XF 2.2 How to remove forum description from a single forum?

Luke247

Member
On the main page where I list the forums, I have the forum descriptions "inline". However, I want to remove the forum description from a single forum only on the main page that lists all the forums. How can I do this?
 
Solution
I just tried this code and it still displays in mobile... is there something else that might work?
Just looked a the code and for some reason XenForo is using an "!important" property on the node description css for mobile. The way to override this is just to add the "!important" property to your new css.

CSS:
@media (min-width: 1px) {
    .node.node--id13 .node-description {
        display: none !important;
    }
}

I did a quick check and it doesn't appear to cause any issues with the page layout.

bzcomputers

Well-known member
This only works in desktop. Please, how can I make it work in mobile too?
The node description is targeted differently by default for different sized screens within XenForo. Currently you are missing device sizes smaller than 650px wide.

To apply the new css to all device sizes just surround the css with a media query...

CSS:
@media (min-width: 1px) {
    .node.node--id13 .node-description {
        display: none;
    }
}

This is basically saying apply this css to all device sizes greater than 1px wide. Writing it this way will cover you in case XenForo in the future decides to target additional devices sizes.
 

Luke247

Member
The node description is targeted differently by default for different sized screens within XenForo. Currently you are missing device sizes smaller than 650px wide.

To apply the new css to all device sizes just surround the css with a media query...

CSS:
@media (min-width: 1px) {
    .node.node--id13 .node-description {
        display: none;
    }
}

This is basically saying apply this css to all device sizes greater than 1px wide. Writing it this way will cover you in case XenForo in the future decides to target additional devices sizes.
Thank you for your help with this. Is there a way to do this for multiple forums without have to write the entire code for each forum?

For example, rather than this:

CSS:
@media (min-width: 1px) {
    .node.node--id13 .node-description {
        display: none;
    }
}
@media (min-width: 1px) {
    .node.node--id45 .node-description {
        display: none;
    }
}
@media (min-width: 1px) {
    .node.node--id75 .node-description {
        display: none;
    }
}

Can I combine the node id numbers somehow to make it shorter?
 

Luke247

Member
The node description is targeted differently by default for different sized screens within XenForo. Currently you are missing device sizes smaller than 650px wide.

To apply the new css to all device sizes just surround the css with a media query...

CSS:
@media (min-width: 1px) {
    .node.node--id13 .node-description {
        display: none;
    }
}

This is basically saying apply this css to all device sizes greater than 1px wide. Writing it this way will cover you in case XenForo in the future decides to target additional devices sizes.

I just tried this code and it still displays in mobile... is there something else that might work?
 

bzcomputers

Well-known member
I just tried this code and it still displays in mobile... is there something else that might work?
Just looked a the code and for some reason XenForo is using an "!important" property on the node description css for mobile. The way to override this is just to add the "!important" property to your new css.

CSS:
@media (min-width: 1px) {
    .node.node--id13 .node-description {
        display: none !important;
    }
}

I did a quick check and it doesn't appear to cause any issues with the page layout.
 
Solution
Top