Responsive Organization Chart [updated]

In this example below you will see how to do a Responsive Organization Chart [updated] with some HTML / CSS and Javascript

A pure HTML/ CSS responsive organization chart with departments and sub-sectionsImprovements: - media queries are separated in one place only and not all over the css (more control on it)

Thumbnail
This awesome code was written by AldoFerrari, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright AldoFerrari ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Responsive Organization Chart [updated]</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <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>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/AldoFerrari/responsive-organization-chart-updated-raayXJ */
/* Varaibles - config */
/* SCSS*/
body {
  background: #F5EEC9;
}

.content {
  font-family: Verdana;
  font-size: 14px;
  position: relative;
}
.content * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.org-chart {
  display: block;
  clear: both;
  margin-bottom: 30px;
  position: relative;
  /**
  * For IE 6/7 only
  * Include this rule to trigger hasLayout and contain floats.
  */
  /* Box colors */
  /* 1 column */
  /* 2 column */
  /* 3 column */
  /* DEPARTMENTS COLUMNs */
}
.org-chart.cf:before, .org-chart.cf:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.org-chart.cf:after {
  clear: both;
}
.org-chart.cf {
  *zoom: 1;
}
.org-chart ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.org-chart ul li {
  position: relative;
}
.org-chart ul li span {
  display: block;
  border: 3px solid orange;
  text-align: center;
  overflow: hidden;
  text-decoration: none;
  color: black;
  font-size: 12px;
  box-shadow: 4px 4px 9px -4px rgba(0, 0, 0, 0.4);
  -webkit-transition: all linear .1s;
  -moz-transition: all linear .1s;
  transition: all linear .1s;
  background: #92D4A8;
  padding: 4px;
}
.org-chart .lvl-b {
  background: green;
  color: #92D4A8;
}
.org-chart .board {
  width: 70%;
  margin: 0 auto;
  display: block;
  position: relative;
}
.org-chart .board:before {
  content: "";
  display: block;
  position: absolute;
  height: 600px;
  width: 0px;
  border-left: 2px solid orange;
  margin-left: 49%;
  top: 15px;
}
.org-chart ul.columnOne {
  height: 90px;
  position: relative;
  width: 100%;
  display: block;
  clear: both;
}
.org-chart ul.columnOne li {
  width: 30%;
  margin: 0px auto;
  top: 20px;
}
.org-chart ul.columnTwo {
  position: relative;
  width: 100%;
  display: block;
  height: 90px;
  clear: both;
}
.org-chart ul.columnTwo li:first-child {
  width: 30%;
  float: left;
}
.org-chart ul.columnTwo li {
  width: 30%;
  float: right;
}
.org-chart ul.columnTwo:before {
  content: "";
  display: block;
  position: relative;
  width: 80%;
  height: 10px;
  border-top: 2px solid orange;
  margin: 0 auto;
  top: 40px;
}
.org-chart ul.columnThree {
  position: relative;
  width: 100%;
  display: block;
  clear: both;
}
.org-chart ul.columnThree li:first-child {
  width: 30%;
  float: left;
  margin-left: 0;
}
.org-chart ul.columnThree li {
  width: 30%;
  margin-left: 5%;
  float: left;
}
.org-chart ul.columnThree li:last-child {
  width: 30%;
  float: right;
  margin-left: 0;
}
.org-chart ul.columnThree:before {
  content: "";
  display: block;
  position: relative;
  width: 80%;
  height: 10px;
  border-top: 2px solid orange;
  margin: 0 auto;
  top: 40px;
}
.org-chart .departments {
  width: 100%;
  display: block;
  clear: both;
}
.org-chart .departments:before {
  content: "";
  display: block;
  width: 85%;
  height: 22px;
  border-top: 2px solid orange;
  border-left: 2px solid orange;
  border-right: 2px solid orange;
  margin: 0 auto;
  top: 0px;
}
.org-chart .department {
  border-left: 2px solid orange;
  width: 13.2%;
  float: left;
  margin: 0px 4px;
}
.org-chart .department:after {
  content: "";
  position: absolute;
  display: block;
  width: 10px;
  height: 22px;
  border-left: 2px solid orange;
  left: 50%;
  top: -22px;
}
.org-chart .department:first-child:after {
  display: none;
}
.org-chart .department:last-child:after {
  display: none;
}
.org-chart .department.central {
  background: #F5EEC9;
}
.org-chart .department.central:after {
  display: none;
}
.org-chart .department span {
  border-left: 1px solid orange;
}
.org-chart .department li {
  padding-left: 25px;
  border-bottom: 2px solid orange;
  height: 80px;
}
.org-chart .department li span {
  background: #92D4A8;
  top: 38px;
  position: absolute;
  z-index: 1;
  width: 95%;
  height: auto;
  vertical-align: middle;
  right: 0px;
  line-height: 14px;
  border: 3px solid orange;
}
.org-chart .department .sections {
  margin-top: -20px;
}

/* MEDIA QUERIES */
@media all and (max-width: 767px) {
  .org-chart .board {
    margin: 0px;
    width: 100%;
  }
  .org-chart .departments:before {
    border: none;
  }
  .org-chart .department {
    float: none;
    width: 100%;
    margin-left: 0;
    background: #F5EEC9;
    margin-bottom: 40px;
  }
  .org-chart .department:before {
    content: "";
    display: block;
    position: absolute;
    width: 15px;
    height: 60px;
    border-left: 2px solid orange;
    z-index: 1;
    top: -45px;
    left: 0%;
    margin-left: -2px;
  }
  .org-chart .department:after {
    display: none;
  }
  .org-chart .department:first-child:before {
    display: none;
  }
}
/*--------- TO BE REMOVED FROM YOUR CSS --*/
/* this is just to display the behaviour of responsive on codepen */
.responsive-content {
  width: 767px;
  margin: 0px auto;
}
.responsive-content .org-chart .board {
  margin: 0px;
  width: 100%;
}
.responsive-content .org-chart .departments:before {
  border: none;
}
.responsive-content .org-chart .department {
  float: none;
  width: 100%;
  margin-left: 0;
  background: #F5EEC9;
  margin-bottom: 40px;
}
.responsive-content .org-chart .department:before {
  content: "";
  display: block;
  position: absolute;
  width: 15px;
  height: 60px;
  border-left: 2px solid orange;
  z-index: 1;
  top: -45px;
  left: 0%;
  margin-left: -2px;
}
.responsive-content .org-chart .department:after {
  display: none;
}
.responsive-content .org-chart .department:first-child:before {
  display: none;
}

Comments