Side By Side Nodes

Side By Side Nodes

What are subcategories?
My node tree is like this:

Main Category
Category 1
Sub Category 1 (of Category 1)
Forum 1
Forum 2
Sub Category 2 (of Category 1)
Forum 1
Category 2
Sub Category 1 (of Category 2)
Forum 1
The red and orange should be shown in the forum listing.
 
Oh. I'll setup a demo and do this. If I forget bump me it's the weekend and I'm not by a computer.
 
I get this weird text format on mobile sites, as well as small browsers for third posts. The posts in rows of two work perfectly, but the third row has a weird text format:

Untitled-2.webp
 
@Audentio

On columns where there is only one node, the "latest" box extends all the way across. How can I change it so it's as if there were two nodes?

The red line is where I want it to stop extending:

Nodes 1.webp Nodes 2.webp
 
I get this weird text format on mobile sites, as well as small browsers for third posts. The posts in rows of two work perfectly, but the third row has a weird text format:

View attachment 68714

Looks like you forgot to add the media query that only shows the code above certain widths. Make sure to grab that part and wrap all the code inside it.

Hey, @Audentio! Sorry to bother you, but any help with the above? :)

Sorry about that. Yes its easy enough. Just don't add the last few lines of code.

Code:
.nodeList .node.level_2:last-child:nth-child(odd) {width: 100%;}
.nodeList .node.level_2:last-child:nth-child(odd) .nodeText {
margin-right: 270px;
}

This does precisely what you do NOT want it to do. Without this code, last ODD children will display like any other node. At 50%.
 
Sorry about that. Yes its easy enough. Just don't add the last few lines of code.

Code:
.nodeList .node.level_2:last-child:nth-child(odd) {width: 100%;}
.nodeList .node.level_2:last-child:nth-child(odd) .nodeText {
margin-right: 270px;
}

This does precisely what you do NOT want it to do. Without this code, last ODD children will display like any other node. At 50%.

Thanks! (y)
 
Looks like you forgot to add the media query that only shows the code above certain widths. Make sure to grab that part and wrap all the code inside it.


How do I add something to a "Media Query" I googled how to do this, and nothing seems to explain this. I tried adding the code to extra.css as I searched media query in the templates and didn't see anything.
 
How do I add something to a "Media Query" I googled how to do this, and nothing seems to explain this. I tried adding the code to extra.css as I searched media query in the templates and didn't see anything.
The tutorial explains this a bit. But its just the CSS:

@media (your condition here) {
your css here
}
Where your CSS is what will show up when the condition is met. An example condition can be max-width: @maxResponsiveWideWidth which evaluates (by default at least) to max-width: 800px. So that CSS would show up UNTIL 800px. Meaning if the device is 799px for example, that CSS would not work.
 
The tutorial explains this a bit. But its just the CSS:

@media (your condition here) {
your css here
}
Where your CSS is what will show up when the condition is met. An example condition can be max-width: @maxResponsiveWideWidth which evaluates (by default at least) to max-width: 800px. So that CSS would show up UNTIL 800px. Meaning if the device is 799px for example, that CSS would not work.

I still have absolutely no clue. I've added everything from the post to extra.css changed things that needed to be changed, and it's still happening.

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;}

}
is in my css and yet it still does what the picture shows.
 
Top Bottom