• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
Side By Side Nodes

Side By Side Nodes

Slind

Active member
#61
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.
 

Xyphien

Active member
#68
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.png
 

Amaury

Well-known member
#71
@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.png Nodes 2.png
 

Mike Creuzer

Well-known member
#73
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%.
 

Amaury

Well-known member
#74
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)
 

Xyphien

Active member
#75
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.
 

Mike Creuzer

Well-known member
#76
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.
 

Xyphien

Active member
#77
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.