1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.4 Display Messes Up at Smaller Browser Widths

Discussion in 'Styling and Customization Questions' started by Amaury, Nov 15, 2014.

  1. Amaury

    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.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.
     
  2. Amaury

    Amaury Well-Known Member

    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
     
  3. Steve F

    Steve F Well-Known Member

    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;
    }
     
  4. Amaury

    Amaury Well-Known Member

    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.
     

Share This Page