XF 2.2 How to keep thread title inside page container?

Solution
If you can't remove the CSS I mentioned above, paste this into your extra.less Template to simply override it on mobile:

CSS:
@media all and (max-width: 600px) {
    .node-extra-row { white-space: normal; }
}

Mangini

Well-known member
It looks like the custom CSS you added to adjust forum row text is causing an issue on mobile. Find the .node-extra-row class and confine it to a min-width: 600px media query so it will no longer apply past screens smaller than 600px.

Code:
@media all and (min-width: 600px) {
    .node-extra-row {
        overflow: hidden;
        white-space: nowrap;
        word-wrap: normal;
        text-overflow: ellipsis;
        color: #acb1b5;
    }
}

The actual cause of the issue is the white-space: nowrap; line, but it seems worth nulling the entire selector on mobile.
 

jaystonics

New member
It looks like the custom CSS you added to adjust forum row text is causing an issue on mobile. Find the .node-extra-row class and confine it to a min-width: 600px media query so it will no longer apply past screens smaller than 600px.

Code:
@media all and (min-width: 600px) {
    .node-extra-row {
        overflow: hidden;
        white-space: nowrap;
        word-wrap: normal;
        text-overflow: ellipsis;
        color: #acb1b5;
    }
}

The actual cause of the issue is the white-space: nowrap; line, but it seems worth nulling the entire selector on mobile.
I will try this. Thank you
 

jaystonics

New member
It looks like the custom CSS you added to adjust forum row text is causing an issue on mobile. Find the .node-extra-row class and confine it to a min-width: 600px media query so it will no longer apply past screens smaller than 600px.

Code:
@media all and (min-width: 600px) {
    .node-extra-row {
        overflow: hidden;
        white-space: nowrap;
        word-wrap: normal;
        text-overflow: ellipsis;
        color: #acb1b5;
    }
}

The actual cause of the issue is the white-space: nowrap; line, but it seems worth nulling the entire selector on mobile.
this is what I have now:

}
h3.node-title a {
<xf:if is="property('nlImgNodeTitleOverflow') =='ellipsis'">
.m-overflowEllipsis();
</xf:if>;
}
.node-stats {
flex: 1 0 100%;
clear: both;
width: auto;
padding: @xf-nlGridNodePaddingV 0;
.xf-nlGridNodeStatsBlock();
}
.node-extra {
flex: 1 0 100%;
clear: both;
min-width: 0;
width: auto;
padding: @xf-nlGridNodePaddingV @xf-nlGridNodePaddingH;
.xf-nlGridNodeLastPost();
}


Can you see where/how I need to change code? Thanks
 

Mangini

Well-known member
If you can't remove the CSS I mentioned above, paste this into your extra.less Template to simply override it on mobile:

CSS:
@media all and (max-width: 600px) {
    .node-extra-row { white-space: normal; }
}
 
Solution
Top