<div class="content">
<h1>Responsive Organization Chart (updated)</h1>
<figure class="org-chart cf">
<div class="board ">
<ul class="columnThree">
<li>
<span>
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
<li>
<span>
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
<li>
<span>
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
</ul>
<ul class="columnOne">
<li>
<span class="lvl-b">
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
</ul>
<ul class="columnTwo">
<li>
<span>
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
<li>
<span>
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
</ul>
<ul class="columnTwo">
<li>
<span>
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
<li>
<span>
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
</ul>
</div>
<ul class="departments ">
<li class="department ">
<span class="lvl-b">
<strong>Position Name</strong>
<br>Name Surname
<br>AB
</span>
<ul class="sections">
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
</ul>
</li>
<li class="department ">
<span class="lvl-b">
<strong>Position Name</strong>
<br>Name Surname
<br>AB
</span>
<ul class="sections">
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>CC
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>CC
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>CC
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>CC
</span>
</li>
</ul>
</li>
<li class="department ">
<span class="lvl-b">
<strong>Position Name</strong>
<br>Name Surname
<br>AB
</span>
<ul class="sections">
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
</ul>
</li>
<li class="department central">
<span class="lvl-b">
<strong>Position Name</strong>
<br>Name Surname
<br>AB
</span>
<ul class="sections">
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>CC
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>CC
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>CC
</span>
</li>
</ul>
</li>
<li class="department ">
<span class="lvl-b">
<strong>Position Name</strong>
<br>Name Surname
<br>AB
</span>
<ul class="sections">
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
</ul>
</li>
<li class="department ">
<span class="lvl-b">
<strong>Position Name</strong>
<br>Name Surname
<br>AB
</span>
<ul class="sections">
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>CC
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>CC
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>CC
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>CC
</span>
</li>
</ul>
</li>
<li class="department ">
<span class="lvl-b">
<strong>Position Name</strong>
<br>Name Surname
<br>AB
</span>
<ul class="sections">
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
</ul>
</li>
</ul>
</figure>
<p>
This is an updated version of "Responsive Organization Chart" from <a href="https://codepen.io/siiron/">Ronny Siikaluoma</a>'s Pen <a href="https://codepen.io/siiron/pen/aLkdE/">Responsive Organization Chart</a>.
</p>
<h2>Improvments:</h2>
<ul>
<li>media queries are separated in one place only and not all over the css (more control on it)</li>
<li>3 new style of line (a 3 block column line; a 2 block column block line; a single block line)</li>
<li>use SCSS to maange easly varaibles and breakepoint</li>
<li>separated the list of departments from board area (more control and less ul insie ul inside ul inside ul)</li>
<li>
7 column on the department area
</li>
</ul>
<h1>Responsive Example <h1>
<div class="responsive-content">
<figure class="org-chart cf">
<div class="board ">
<ul class="columnThree">
<li>
<span>
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
<li>
<span >
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
<li>
<span >
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
</ul>
<ul class="columnOne">
<li>
<span class="lvl-b">
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
</ul>
<ul class="columnTwo">
<li>
<span >
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
<li>
<span >
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
</ul>
<ul class="columnTwo">
<li>
<span>
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
<li>
<span >
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
</ul>
</div>
<ul class="departments ">
<li class="department ">
<span class="lvl-b">
<strong>Position Name</strong>
<br>Name Surname
<br>AB
</span>
<ul class="sections">
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
</ul>
</li>
<li class="department ">
<span class="lvl-b">
<strong>Position Name</strong>
<br>Name Surname
<br>AB
</span>
<ul class="sections">
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>CC
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>CC
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>CC
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>CC
</span>
</li>
</ul>
</li>
<li class="department ">
<span class="lvl-b">
<strong>Position Name</strong>
<br>Name Surname
<br>AB
</span>
<ul class="sections">
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
</ul>
</li>
<li class="department central">
<span class="lvl-b">
<strong>Position Name</strong>
<br>Name Surname
<br>AB
</span>
<ul class="sections">
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>CC
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>CC
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>CC
</span>
</li>
</ul>
</li>
<li class="department ">
<span class="lvl-b">
<strong>Position Name</strong>
<br>Name Surname
<br>AB
</span>
<ul class="sections">
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
</ul>
</li>
<li class="department ">
<span class="lvl-b">
<strong>Position Name</strong>
<br>Name Surname
<br>AB
</span>
<ul class="sections">
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>CC
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>CC
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>CC
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>CC
</span>
</li>
</ul>
</li>
<li class="department ">
<span class="lvl-b">
<strong>Position Name</strong>
<br>Name Surname
<br>AB
</span>
<ul class="sections">
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>AA
</span>
</li>
<li class="section"> <span>
<strong>Position Name</strong>
<br>Name Surname
<br>BB
</span>
</li>
</ul>
</li>
</ul>
</figure>
</div>
</div>/* Varaibles - config */
$linePx: 2px;
$borderPx: 3px;
$screen-sm: 767px;
$color1: #92D4A8;
$color2: green;
$subcolor1: orange;
$subcolor2: black;
$pageBG: #F5EEC9;
/* SCSS*/
body{
background:$pageBG;
}
.content{
font-family:Verdana;
font-size:14px;
* {
box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
}
position: relative;
}
.org-chart{
display:block;
clear: both;
margin-bottom: 30px;
position: relative;
&.cf:before,
&.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
&.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
&.cf {
*zoom: 1;
}
ul{
padding: 0;
margin: 0;
list-style: none;
}
ul li{ position: relative;}
ul li span{
display: block;
border: $borderPx solid $subcolor1;
text-align: center;
overflow: hidden;
text-decoration: none;
color: $subcolor2;
font-size: 12px;
box-shadow: 4px 4px 9px -4px rgba(0,0,0,0.4);
transition: all linear .1s;
transition: all linear .1s;
transition: all linear .1s;
background: $color1;
padding: 4px;
}
/* Box colors */
.lvl-b { background: $color2; color:$color1; }
.board{
width:70%;
margin: 0 auto;
display: block;
position: relative;
&:before{
content: "";
display: block;
position: absolute;
height: 600px;
width: 0px;
border-left: $linePx solid $subcolor1;
margin-left: 49%;
top: 15px;
}
}
/* 1 column */
ul.columnOne{
height:90px;
position: relative;
width: 100%;
display: block;
clear: both;
li{
width:30%;
margin: 0px auto;
top:20px;
}
}
/* 2 column */
ul.columnTwo{
position: relative;
width: 100%;
display: block;
height:90px;
clear: both;
li:first-child{
width:30%;
float: left;
}
li{
width:30%;
float: right;
}
&:before{
content: "";
display: block;
position: relative;
width: 80%;
height: 10px;
border-top: $linePx solid $subcolor1;
margin: 0 auto;
top: 40px;
}
}
/* 3 column */
ul.columnThree{
position: relative;
width: 100%;
display: block;
clear: both;
li:first-child{
width:30%;
float: left;
margin-left:0;
}
li{
width:30%;
margin-left:5%;
float: left;
}
li:last-child{
width:30%;
float: right;
margin-left:0;
}
&:before{
content: "";
display: block;
position: relative;
width: 80%;
height: 10px;
border-top: $linePx solid $subcolor1;
margin: 0 auto ;
top: 40px;
}
}
/* DEPARTMENTS COLUMNs */
.departments{
width: 100%;
display: block;
clear: both;
&:before{
content: "";
display: block;
width: 85%;
height: 22px;
border-top: $linePx solid $subcolor1;
border-left: $linePx solid $subcolor1;
border-right: $linePx solid $subcolor1;
margin: 0 auto ;
top: 0px;
}
}
.department{
border-left: $linePx solid $subcolor1;
width: 13.2%;
float: left;
margin: 0px 4px;
&:after{
content: "";
position:absolute;
display: block;
width: 10px;
height: 22px;
border-left: $linePx solid $subcolor1;
left:50%;
top: -22px;
}
&:first-child{
&:after{
display:none;
}
}
&:last-child{
&:after{
display:none;
}
}
&.central{
background:$pageBG;
&:after{
display:none;
}
}
span{
border-left: 1px solid $subcolor1;
}
li{
padding-left: 25px;
border-bottom: $linePx solid $subcolor1;
height: 80px;
}
li span{
background: $color1;
top: 38px;
position: absolute;
z-index: 1;
width: 95%;
height: auto;
vertical-align: middle;
right:0px;
line-height: 14px;
border: $borderPx solid $subcolor1;
}
.sections{
margin-top: -20px;
}
}
}
@mixin responsiveClasses() {
.org-chart{
.board{
margin: 0px;
width:100%;
}
.departments{
&:before{
border:none;
}
}
.department{
float: none;
width: 100%;
margin-left: 0;
background:$pageBG;
margin-bottom: 40px;
&:before{
content: "";
display: block;
position: absolute;
width: 15px;
height: 60px;
border-left: $linePx solid $subcolor1;
z-index: 1;
top: -45px;
left: 0%;
margin-left: -2px;
}
&:after{
display: none;
}
}
.department:first-child:before{ display: none;}
}
}
/* MEDIA QUERIES */
@media all and (max-width: $screen-sm){
@include responsiveClasses();
}
/*--------- TO BE REMOVED FROM YOUR CSS --*/
/* this is just to display the behaviour of responsive on codepen */
.responsive-content{
width: $screen-sm;
margin:0px auto;
@include responsiveClasses();
}
External CSS
This Pen doesn't use any external CSS resources.