Ask question

Ask Questions and Get Answers from Our Community

Answer

Answer Questions and Become an Expert on Your Topic

Contact Staff

Our Experts are Ready to Answer your Questions

  • If we find you sharing Premium resources or Free Resources or any content on this site anywhere else you will be permanently banned and no refund will be issued! So don't do it! We are striving to be the number one Forum Network and Leeching just hurts it for everyone! This content is only intended for personal use and not to be repackaged or resold. If you are caught sharing our content to other sites you are forfeiting your membership and will be banned. Also creating muliple accounts is a bannable offense if you are caught using more than one username you will be banned on all usernames.
  • Downloading from our site will require you to have a paid membership. Upgrade to a Premium Membership today!

    Dont forget read our Rules! Also anyone caught Sharing this content will be banned. By using this site you are agreeing to our rules so read them. Saying I did not know is simply not an excuse! You have been warned.

[Xenbros] Grid layout for node without addon

xFMafia

Administrator
Administrative
Joined
Feb 18, 2019
Messages
726
Reputation
1,133
Points
93
[Xenbros] Grid layout for node without addon. Hemant here again with Node grid layout without Addon.
Well after Developing some addon i really like to go back to learn and play with css but this time with flex instead of grid so here a quick mod for you.
so here it is.

So here a simple CSS that you need to place it in Extra.less that will give it what you looking for.

IF YOU LIKE IT PLEASE REVIEW IT

Note :
you need to adjust the max-width: 1100px; according to your forum layout.
CSS:
.block--category{
@media (min-width: 1100px){
@supports(display: grid){
.block-body{display:grid; grid-template-columns:50% 50%;}
.block-container{background-color: #ffffff00;border:none;}
.node-body{
  display:flex;
  flex-wrap: wrap;
  border-right: 1px solid #dedede;
  position:relative;
  height: 100%;
  padding:5px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border-width: 1px;
  border-style: solid;
  background-color: #ffffff;
  border-top-color: #dfdfdf;
  border-right-color: #d8d8d8;
  border-bottom-color: #cbcbcb;
  border-left-color: #d8d8d8;
}
.node{margin: 5px 1px 5px 1px;}
.node-icon{width:12%; padding-top:5px;}
.node-main{width:87%;} .node-stats{width:110px;}
.node-extra{
  position:absolute;
  right:0px;
  bottom:0px;
  padding: 10px 10px 13px 0px;
}
}}
}
Grid layout for node without addon
 
Top