XF 1.4 Display Messes Up at Smaller Browser Widths

Amaury

Well-known member
#1
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:

upload_2014-11-15_15-40-55.png upload_2014-11-15_15-41-26.png

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

upload_2014-11-15_15-43-7.png upload_2014-11-15_15-43-30.png upload_2014-11-15_15-44-6.png

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

Amaury

Well-known member
#2
Using the moderation bar, for example, I have the color hard-coded as white:

upload_2014-11-15_15-49-41.png

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

upload_2014-11-15_15-50-31.png
 

Steve F

Well-known member
#3
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;
}
 

Amaury

Well-known member
#4
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.
 
Top