Side By Side Nodes

Side By Side Nodes

Hi Mike, i have little problem with page and link node, they are not at the same level as the forums :

Screenshot_36.webp

An idea ?
 
There are some options. our method is rather complicated. It essentially fakes borders so it looks like a table and you don't notice the height issue. @Allan
 
I copied the code into extra.css and it works just fine. I'm looking at doing side by side on just one node (node number 115). Can anybody point me in the right direction to do side by side on just one node?
 
How do I fix the bunched up look on mobile? I reverted it back to it's original look but I'd really like to use this on my site, but it looks weird for mobile while it looks perfect for pc.
 

Attachments

  • screenshot.webp
    screenshot.webp
    52.5 KB · Views: 19
How do I fix the bunched up look on mobile? I reverted it back to it's original look but I'd really like to use this on my site, but it looks weird for mobile while it looks perfect for pc.
Is the guy still around? and if not does anyone else know? I really need to figure out a way to fix this.
 
I copied the code into extra.css and it works just fine. I'm looking at doing side by side on just one node (node number 115). Can anybody point me in the right direction to do side by side on just one node?

I know this is a little bit old but was wondering whether you ended up finding a solution to this. With our boards there are only certain nodes (categories) that we'd like the boards to be side by side not all of them so if you have found a solution (or if @Mike Creuzer has) it would be greatly appreciated.
 
Thanks for that - should've looked first I had just invested a few hours going through the template modifications section and forgot about the actual addon section for a bit - your assistance is greatly appreciated @CFodder

No problem, it's great too that it can be changed on the front page :) (y)
 
Hi all,

I would like to create a grid view of the nodes with two columns for XF 2.2
I know there are theme's or add-ons with this function, but I would like to learn the XF code. :)

As guideline I use this resource and with searching the forums and with help from the inspecting elements tool I updated the divs to XF2.2.

However, just updating the divs to XF 2.2 style does not really work.

This code reverts all the changes to default, so I did not use it.
{xen:helper clearfix, '.block-body'}

the code I have at the moment (extra.less):
CSS:
.block-body .node--depth2 {float: left; width: 50%;}
.block-body .node--forum, .block-body .node--link, .block-body .node--page {float: left; width: 50%;}
.block-body .node--depth2:nth-child(odd) {
        clear: left;
    }

/*{xf-helper clearfix, '.block-body'}*/

.block-body .node--depth2 .node-extra {
        position: static;
        width: auto;
        padding-right: 20px;
        margin-top: 0;
    }

    .block-body .node--depth2 .node-main.js-nodeMain {margin-right: 26px;}
    .block-body .node--depth2 .nodeControls {right: 8px;}

/* METHOD 2: SIDE BY SIDE FORUM, PAGE, LINK NODES */

@media (min-width: @maxResponsiveMediumWidth) {

    /*{xen:helper clearfix, '.node-body'}*/

    .block-body .node--depth2 {float: left; width: 50%;}

    .block-body .node--depth2:nth-child(odd) {
        clear: left;
    }

    .block-body .node--depth2 .node-extra {
        position: static;
        width: auto;
        padding-right: 20px;
        margin-top: 0;
    }

    .block-body .node--depth2 .node-main.js-nodeMain {margin-right: 26px;}
    .block-body .node--depth2 .nodeControls {right: 8px;}
 
    .block-body .node--depth2:last-child:nth-child(odd) {width: 100%;}
    .block-body .node--depth2:last-child:nth-child(odd) .node-main.js-nodeMain {
        margin-right: 270px;
    }

     .block-body .node--depth2:last-child:nth-child(odd) .node-extra {
        width: 210px;
        margin-top: 10px;
        position: absolute;
        padding-right: 10px;
        }

    .block-body .node--depth2:last-child:nth-child(odd) .nodeControls {right: 242px;}

I get two columns. However, it does not really look how it should. See the attached screenshot.
Did I miss something or does XF2.2 require another method to achieve this?

Thanks in advance for any help.
 

Attachments

  • grid view nodes.webp
    grid view nodes.webp
    28.2 KB · Views: 4
Last edited:
Top Bottom