XF 1.4 Display Messes Up at Smaller Browser Widths

Amaury

Well-known member
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.webp upload_2014-11-15_15-41-26.webp

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

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

Both Martok and Optic guess it's something to do with responsiveness code, but I'm not sure what the issue could be.
 
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;
}
 
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.
 
Back
Top Bottom