XF 2.2 How to keep thread title inside page container?

[jaystonics]

Hello

My thread tittles are going outside the page container on mobile https://wowsforum.com how can I fix this?
thanks

 

[kolakube]

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.

@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]

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.

@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]

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.

@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

 

[kolakube]

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

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

 

[jaystonics]

That worked, Thank you!

 

[kolakube]

That worked, Thank you!

Great! Do you mind marking my answer as the solution?

 

[jaystonics]

done