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

Side By Side Nodes

From Audentio Design

  1. Mike Creuzer

    Mike Creuzer Well-Known Member

    Audentio submitted a new resource:

    Side By Side Nodes - From Audentio Design

    Read more about this resource...
     
  2. BassMan

    BassMan Well-Known Member

    Sorry, should I put this code to EXTRA.CSS?

    EDIT: yes
     
    Last edited: Oct 16, 2013
  3. Mike Creuzer

    Mike Creuzer Well-Known Member

    Yes, added that to the tutorial, should have clarified. :) Thanks!
     
  4. BassMan

    BassMan Well-Known Member

    Btw, but on mobile view that method 2 doesn't look good.
     
  5. Mike Creuzer

    Mike Creuzer Well-Known Member

    Make sure you are wrapping the code in the media tag. Nothing in this tutorial should have any impact on mobile views under 610px (by default).
     
  6. BassMan

    BassMan Well-Known Member

    Well, I just copy and paste this code to extra.css (and all other codes listed in method 2):
    Code:
    /* METHOD 2: SIDE BY SIDE FORUM, PAGE, LINK NODES */
    
    @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 > li .nodeLastPost {
    position: static;
    width: auto;
    padding-right: 20px;
    margin-top: 0;
    }
    
    .nodeList > li .nodeText {margin-right: 26px;}
    .nodeList > li .nodeControls {right: 8px;}
    
    }
    
    Is it ok? Sorry, not sure if I understand right. How to wrap?
     
    Last edited: Oct 16, 2013
    GhoHan likes this.
  7. Mike Creuzer

    Mike Creuzer Well-Known Member

    It is wrapped, see here:

    Code:
    @media (min-width: @maxResponsiveMediumWidth) {
    Make sure that under Style Properties > @maxResponsiveMediumWidth, that has a value (around 610px).
     
  8. BassMan

    BassMan Well-Known Member

    It is exactly 610px. And that is the code I've put into extra.css:
    Code:
    /* START - NON-CATEGORY NODES SIDE BY SIDE */
    .nodeList .node.level_2 {float: left; width: 50%;}
    
    .nodeList .node.forum, .nodeList .node.link, .nodeList .node.page {float: left; width: 50%;}
    
    .nodeList .node.level_2:nth-child(odd) {
            clear: left;
        }
       
    {xen:helper clearfix, '.nodeList'}
    
        .nodeList > li .nodeLastPost {
            position: static;
            width: auto;
            padding-right: 20px;
            margin-top: 0;
        }
     
        .nodeList > li .nodeText {margin-right: 26px;}
        .nodeList > li .nodeControls {right: 8px;}
    
    /* METHOD 2: SIDE BY SIDE FORUM, PAGE, LINK NODES */   
    @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 > li .nodeLastPost {
            position: static;
            width: auto;
            padding-right: 20px;
            margin-top: 0;
        }
     
        .nodeList > li .nodeText {margin-right: 26px;}
        .nodeList > li .nodeControls {right: 8px;}
     
    }
    
    
        .nodeList > li:last-child:nth-child(odd) {width: 100%;}
        .nodeList > li:last-child:nth-child(odd) .nodeText {
            margin-right: 270px;
        }
    
    /* END - NON-CATEGORY NODES SIDE BY SIDE */
     
  9. Mike Creuzer

    Mike Creuzer Well-Known Member

    Do you have a link or screen?
     
  10. BassMan

    BassMan Well-Known Member

    Check convo. And take a look over mobile phone.
     
  11. Mike Creuzer

    Mike Creuzer Well-Known Member

    Ah. Notice that your media curly brace does not close. If you notice in the tutorial, try grabbing that exactly or adding a curly brace after that code and it should start working.
     
  12. BassMan

    BassMan Well-Known Member

    Hm, now I've added curly brace => } at the end of this code and got this:
    Code:
    /* START - NON-CATEGORY NODES SIDE BY SIDE */
    .nodeList .node.level_2 {float: left; width: 50%;}
    
    .nodeList .node.forum, .nodeList .node.link, .nodeList .node.page {float: left; width: 50%;}
    
    .nodeList .node.level_2:nth-child(odd) {
            clear: left;
        }
       
    {xen:helper clearfix, '.nodeList'}
    
        .nodeList > li .nodeLastPost {
            position: static;
            width: auto;
            padding-right: 20px;
            margin-top: 0;
        }
     
        .nodeList > li .nodeText {margin-right: 26px;}
        .nodeList > li .nodeControls {right: 8px;}
    
    /* METHOD 2: SIDE BY SIDE FORUM, PAGE, LINK NODES */   
    @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 > li .nodeLastPost {
            position: static;
            width: auto;
            padding-right: 20px;
            margin-top: 0;
        }
     
        .nodeList > li .nodeText {margin-right: 26px;}
        .nodeList > li .nodeControls {right: 8px;}
     
    }
    
        .nodeList > li:last-child:nth-child(odd) {width: 100%;}
        .nodeList > li:last-child:nth-child(odd) .nodeText {
            margin-right: 270px;
        }
    }
    
    /* END - NON-CATEGORY NODES SIDE BY SIDE */
    But still not fixed!
     
  13. Mike Creuzer

    Mike Creuzer Well-Known Member

    Your code is still wrong, now you have an extra curly brace. Just copy the code from the tutorial :)
     
  14. BassMan

    BassMan Well-Known Member

    I did. All codes are copied from tutorial. Checked twice!
     
  15. BassMan

    BassMan Well-Known Member

    Anyway, is it possible to have it default view on mobile and columns style only on desktop computer?
     
  16. DRE

    DRE Well-Known Member

    You're amazing.
     
    zylstra likes this.
  17. Gabby

    Gabby Well-Known Member

    Hello,
    Can one of you fellas help me out with this? gailsault.com/ourcommunity style two column.


    I have no idea what I'm doing wrong. I've pasted everything correctly I think. :)

    Thank you.

    Gabby
     
  18. CFodder

    CFodder Well-Known Member

    Very nice indeedy and thanks for sharing :).

    One question, how could I convert it to 3 nodes side-by-side (using Method 2)? I've changed the % to 33% but it just leaves a gap where the 3rd column should be.
     
    Gabby likes this.
  19. Mike Creuzer

    Mike Creuzer Well-Known Member

    I made just a few minor changes to the code, nothing that should change functionality, but I added an option to show the last odd node like the default XenForo node, just putting it back on one line essentially.

    Well this is a bit tricker, but can be done.

    Replace this:

    Code:
        .nodeList .node.level_2 {float: left; width: 50%;}
    
        .nodeList .node.level_2:nth-child(odd) {
            clear: left;
        }
    
    With this:

    Code:
        .nodeList .node.level_2 {float: left; width: 33.33%;}
    
        .nodeList .node.level_2:nth-child(3n - 2) {
            clear: left;
        }
    The above code only gets you started, it is recommended that you perhaps drop down to 2 nodes and back to 1 the thinner the device width.
     
    Last edited: Oct 17, 2013
    Brandon Sheley and CFodder like this.
  20. CFodder

    CFodder Well-Known Member

    Thanks for that, works like a charm. And to be honest I don't really know what you're talking about in your last sentence :eek:.
     

Share This Page