XF 2.0 Node Styling Glitch

[MegaPixel]

Hello,

We are working on our Development site and have had assistance to set up some features we'd like. However, we've been unable to get in touch with that person about an issue we've noticed. I'm not a coder, but I've managed to isolate the problem but I'm not sure how to fix it.

We have a section on our extra.css that changes 6 nodes (Working hand in hand with ThemeHouse Nodes addon for the way it's displayed) but the code moves the node title, thread and message count, last post, and the subforum dropdown list. This works perfectly! Until.. you minimise your window. Once you minimize your window, it creates a huge enormous blank space to the right of the forum. Screenshots below.

Spoiler: How the code looks on a full window

Spoiler: Minimized Window

Spoiler: The Code that does this. The red text in the code is what causes this problem, but we need this otherwise it cuts off our images

.node--id16 .extra-sub-forums, .node--id17 .extra-sub-forums, .node--id18 .extra-sub-forums, .node--id19 .extra-sub-forums, .node--id20 .extra-sub-forums, .node--id21 .extra-sub-forums {
display: block !important;
margin-top: -5px;
} 

.node--id16 .node-icon, .node--id17 .node-icon, .node--id18 .node-icon, .node--id19 .node-icon, .node--id20 .node-icon, .node--id21 .node-icon {
display: none !important;
} 

.node--id16 .node-extra-bottom, .node--id17 .node-extra-bottom, .node--id18 .node-extra-bottom, .node--id19 .node-extra-bottom, .node--id20 .node-extra-bottom, .node--id21 .node-extra-bottom {
height: 50px;
display: flex; 
align-items: center;
background: linear-gradient(to right, #000000, #000, transparent, transparent);
} 

.node--id16 .node-extra, .node--id17 .node-extra, .node--id18 .node-extra, .node--id19 .node-extra, .node--id20 .node-extra, .node--id21 .node-extra {
  margin: 10px 0px 0px 35px !important; 
}

.node--id16 .node-meta-2, .node--id17 .node-meta-2, .node--id18 .node-meta-2, .node--id19 .node-meta-2, .node--id20 .node-meta-2, .node--id21 .node-meta-2 {
display: block !important;
}

.node--id16 .node-meta, .node--id17 .node-meta, .node--id18 .node-meta, .node--id19 .node-meta, .node--id20 .node-meta, .node--id21 .node-meta {
display: none !important;
} 

.node--id16 .pairs--inline:before, .node--id17 .pairs--inline:before, .node--id18 .pairs--inline:before, .node--id19 .pairs--inline:before, .node--id20 .pairs--inline:before, .node--id21 .pairs--inline:before {
display: none !important;
}

.node--id16 .node-title, .node--id17 .node-title, .node--id18 .node-title, .node--id19 .node-title, .node--id20 .node-title, .node--id21 .node-title {
font-size: 11px !important;
position: absolute;
bottom: 0;
left: 0;
}

.node--id16 .thNodes__nodeHeader, .node--id17 .thNodes__nodeHeader, .node--id18 .thNodes__nodeHeader, .node--id19 .thNodes__nodeHeader, .node--id20 .thNodes__nodeHeader, .node--id21 .thNodes__nodeHeader {
margin-left: 10px !important;
margin-bottom: 5px;
}

.node-statsMeta2 {
display: flex; 
}

.node-statsMeta2 dl {
margin-left: 35px;
}

.node-statsMeta2 dd {
margin-inline-start: 15px !important;
}

.node--id16 .node-body, .node--id17 .node-body, .node--id18 .node-body, .node--id19 .node-body, .node--id20 .node-body, .node--id21 .node-body {
height: 240px;
}

.node--id16 .node-body .has-flexbox, .node--id17 .node-body .has-flexbox, .node--id18 .node-body .has-flexbox, .node--id19 .node-body .has-flexbox, .node--id20 .node-body .has-flexbox, .node--id21 .node-body .has-flexbox {
display: none !important;
}

Spoiler: If I remove this line from the code above, it stops the big space but then it breaks our images

.node--id16 .node-body, .node--id17 .node-body, .node--id18 .node-body, .node--id19 .node-body, .node--id20 .node-body, .node--id21 .node-body {
height: 240px;
}

I was wondering if someone may be able to advise how we can fix this?

Kind Regards,
Jamie

 

[Ian Hitt]

Would you mind posting a link to the forum where this issue is currently occurring?

 

[MegaPixel]

Would you mind posting a link to the forum where this issue is currently occurring?

Hello,
I've sent this via conversation as it's our Development Site using the same licence as our live.
Kind Regards,
Jamie

 

[Ian Hitt]

I responded to your PM with some suggestions