XF 1.4 Display Messes Up at Smaller Browser Widths

Thanks to @Martok and @Optic for pointing this out to me. At first I thought it was just a tablet issue, but I just did a quick test by resizing my browser Window and was able to reproduce the issue myself.

This is how things should look:



But when I resize my browser window to about this size, everything messes up:



Both Martok and Optic guess it's something to do with responsiveness code, but I'm not sure what the issue could be.

 

Using the moderation bar, for example, I have the color hard-coded as white:



But at a smaller size, it's not even showing up in the inspector:

 

This is showing, you will need to remove that media query. Probably something similar on your mod bar as well.

@media (min-width: 610px)
.navTabs .navTab.PopupClosed .navLink {
color: rgb(255, 255, 255) !important;
}

 

Found the offending code. It's coming from @Mike Creuzer's code for side by side nodes:

Code:

@media (min-width: @maxResponsiveMediumWidth) {

{xen:helper clearfix, '.nodeList'}

.nodeList .node.level_2 {
    float: left; width: 50%;
}

.nodeList .node.level_2:nth-child(odd) {
    clear: left;
}

.nodeList .node.level_2 .nodeLastPost {
    position: static;
    width: auto;
    padding-right: 20px;
    margin-top: 0;
}

.nodeList .node.level_2 .nodeText {
    margin-right: 26px;
}

.nodeList .node.level_2 .nodeControls {
    right: 8px;
}

.nodeList .node.category .node .nodeText {
    margin-right: 10px;
}

.nodeList .categoryForumNodeInfo, .nodeList .forumNodeInfo, .nodeList .pageNodeInfo, .nodeList .linkNodeInfo {
    min-height: 104px !important;
}

Removing the very first line of code seems to resolve the issue.