{"id":10589,"date":"2024-03-03T10:30:00","date_gmt":"2024-03-03T10:30:00","guid":{"rendered":"https:\/\/codehim.com\/?p=10589"},"modified":"2024-03-04T08:30:43","modified_gmt":"2024-03-04T03:30:43","slug":"responsive-organization-chart-using-pure-css","status":"publish","type":"post","link":"https:\/\/codehim.com\/chart-graph\/responsive-organization-chart-using-pure-css\/","title":{"rendered":"Responsive Organization Chart Using Pure CSS"},"content":{"rendered":"

This pure CSS code snippet helps you to create a responsive organization chart. The chart is responsive, adapting to various screen sizes. It visually represents the hierarchical structure of an organization, from directors to departments and sections. Each element is designed with clickable links for easy navigation. Helpful for showcasing team structures on websites, it enhances user experience with a clean and professional design.<\/p>\n

How to Create a Responsive Organization Chart Using Pure CSS<\/h2>\n

1. First of all, load the Modernizr JS<\/a> and Normalize CSS<\/a> by adding the following CDN links into the head tag of your HTML document.<\/p>\n

<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/modernizr\/2.8.3\/modernizr.min.js\" type=\"text\/javascript\"><\/script>\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/normalize\/5.0.0\/normalize.min.css\"><\/pre>\n
2. Create the HTML structure for your organization chart. Use nested lists to represent the hierarchy, and each list item should contain a link with a span for the text. Customize the content based on your organization’s structure.<\/p>\n
<div class=\"content\">\r\n  <h1>Responsive Organization Chart<\/h1>\r\n  <figure class=\"org-chart cf\">\r\n    <ul class=\"administration\">\r\n      <li>\t\t\t\t\t\r\n        <ul class=\"director\">\r\n          <li>\r\n            <a href=\"#\"><span>Director<\/span><\/a>\r\n            <ul class=\"subdirector\">\r\n              <li><a href=\"#\"><span>Assistante Director<\/span><\/a><\/li>\r\n            <\/ul>\r\n            <ul class=\"departments cf\">\t\t\t\t\t\t\t\t\r\n              <li><a href=\"#\"><span>Administration<\/span><\/a><\/li>\r\n              \r\n              <li class=\"department dep-a\">\r\n                <a href=\"#\"><span>Department A<\/span><\/a>\r\n                <ul class=\"sections\">\r\n                  <li class=\"section\"><a href=\"#\"><span>Section A1<\/span><\/a><\/li>\r\n                  <li class=\"section\"><a href=\"#\"><span>Section A2<\/span><\/a><\/li>\r\n                  <li class=\"section\"><a href=\"#\"><span>Section A3<\/span><\/a><\/li>\r\n                  <li class=\"section\"><a href=\"#\"><span>Section A4<\/span><\/a><\/li>\r\n                  <li class=\"section\"><a href=\"#\"><span>Section A5<\/span><\/a><\/li>\r\n                <\/ul>\r\n              <\/li>\r\n              <li class=\"department dep-b\">\r\n                <a href=\"#\"><span>Department B<\/span><\/a>\r\n                <ul class=\"sections\">\r\n                  <li class=\"section\"><a href=\"#\"><span>Section B1<\/span><\/a><\/li>\r\n                  <li class=\"section\"><a href=\"#\"><span>Section B2<\/span><\/a><\/li>\r\n                  <li class=\"section\"><a href=\"#\"><span>Section B3<\/span><\/a><\/li>\r\n                  <li class=\"section\"><a href=\"#\"><span>Section B4<\/span><\/a><\/li>\r\n                <\/ul>\r\n              <\/li>\r\n              <li class=\"department dep-c\">\r\n                <a href=\"#\"><span>Department C<\/span><\/a>\r\n                <ul class=\"sections\">\r\n                  <li class=\"section\"><a href=\"#\"><span>Section C1<\/span><\/a><\/li>\r\n                  <li class=\"section\"><a href=\"#\"><span>Section C2<\/span><\/a><\/li>\r\n                  <li class=\"section\"><a href=\"#\"><span>Section C3<\/span><\/a><\/li>\r\n                  <li class=\"section\"><a href=\"#\"><span>Section C4<\/span><\/a><\/li>\r\n                <\/ul>\r\n              <\/li>\r\n              <li class=\"department dep-d\">\r\n                <a href=\"#\"><span>Department D<\/span><\/a>\r\n                <ul class=\"sections\">\r\n                  <li class=\"section\"><a href=\"#\"><span>Section D1<\/span><\/a><\/li>\r\n                  <li class=\"section\"><a href=\"#\"><span>Section D2<\/span><\/a><\/li>\r\n                  <li class=\"section\"><a href=\"#\"><span>Section D3<\/span><\/a><\/li>\r\n                  <li class=\"section\"><a href=\"#\"><span>Section D4<\/span><\/a><\/li>\r\n                  <li class=\"section\"><a href=\"#\"><span>Section D5<\/span><\/a><\/li>\r\n                  <li class=\"section\"><a href=\"#\"><span>Section D6<\/span><\/a><\/li>\r\n                <\/ul>\r\n              <\/li>\r\n              <li class=\"department dep-e\">\r\n                <a href=\"#\"><span>Department E<\/span><\/a>\r\n                <ul class=\"sections\">\r\n                  <li class=\"section\"><a href=\"#\"><span>Section E1<\/span><\/a><\/li>\r\n                  <li class=\"section\"><a href=\"#\"><span>Section E2<\/span><\/a><\/li>\r\n                  <li class=\"section\"><a href=\"#\"><span>Section E3<\/span><\/a><\/li>\r\n                <\/ul>\r\n              <\/li>\r\n            <\/ul>\r\n          <\/li>\r\n        <\/ul>\t\r\n      <\/li>\r\n    <\/ul>\t\t\t\r\n  <\/figure>\r\n<\/div><\/pre>\n
3. Now, let’s add the CSS styling to make the organization chart visually appealing and responsive. The following CSS code includes styles for different levels, departments, and sections. Customize the colors and adjust the layout according to your organization’s branding.<\/p>\n
*{\r\n\t-webkit-box-sizing: border-box;\r\n\t-moz-box-sizing: border-box;\r\n\tbox-sizing: border-box;\r\n\tposition: relative;\r\n}\r\n\r\n.cf:before,\r\n.cf:after {\r\n    content: \" \"; \/* 1 *\/\r\n    display: table; \/* 2 *\/\r\n}\r\n\r\n.cf:after {\r\n    clear: both;\r\n}\r\n\r\n\/**\r\n * For IE 6\/7 only\r\n * Include this rule to trigger hasLayout and contain floats.\r\n *\/\r\n.cf {\r\n    *zoom: 1;\r\n}\r\n\r\n\/* Generic styling *\/\r\n\r\nbody{\r\n\tbackground: #F5EEC9;\t\r\n}\r\n\r\n.content{\r\n\twidth: 100%;\r\n\tmax-width: 1142px;\r\n\tmargin: 0 auto;\r\n\tpadding: 0 20px;\r\n}\r\n\r\na:focus{\r\n\toutline: 2px dashed #f7f7f7;\r\n}\r\n\r\n@media screen and (max-width: 767px){\r\n\t.content{\r\n\t\tpadding: 0 20px;\r\n\t}\t\r\n}\r\n\r\nul{\r\n\tpadding: 0;\r\n\tmargin: 0;\r\n\tlist-style: none;\t\t\r\n}\r\n\r\nul a{\r\n\tdisplay: block;\r\n\tbackground: #ccc;\r\n\tborder: 4px solid #fff;\r\n\ttext-align: center;\r\n\toverflow: hidden;\r\n\tfont-size: .7em;\r\n\ttext-decoration: none;\r\n\tfont-weight: bold;\r\n\tcolor: #333;\r\n\theight: 70px;\r\n\tmargin-bottom: -26px;\r\n\tbox-shadow: 4px 4px 9px -4px rgba(0,0,0,0.4);\r\n\t-webkit-transition: all linear .1s;\r\n\t-moz-transition: all linear .1s;\r\n\ttransition: all linear .1s;\r\n}\r\n\r\n@media print {\r\n    ul a{\r\n        border: 4px solid #000;\r\n    }\r\n}\r\n\r\n@media screen and (max-width: 767px){\r\n\tul a{\r\n\t\tfont-size: 1em;\r\n\t}\r\n}\r\n\r\n\r\nul a span{\r\n\ttop: 50%;\r\n\tmargin-top: -0.7em;\r\n\tdisplay: block;\r\n}\r\n\r\n\/*\r\n \r\n *\/\r\n\r\n.administration > li > a{\r\n\tmargin-bottom: 25px;\r\n}\r\n\r\n.director > li > a{\r\n\twidth: 50%;\r\n\tmargin: 0 auto 0px auto;\r\n}\r\n\r\n.subdirector:after{\r\n\tcontent: \"\";\r\n\tdisplay: block;\r\n\twidth: 0;\r\n\theight: 130px;\r\n\tbackground: red;\r\n\tborder-left: 4px solid #fff;\r\n\tleft: 45.45%;\r\n\tposition: relative;\r\n}\r\n\r\n@media print {\r\n    .subdirector:after{\r\n        border-left: 4px solid #000;\r\n    }\r\n}\r\n\r\n.subdirector,\r\n.departments{\r\n\tposition: absolute;\r\n\twidth: 100%;\r\n}\r\n\r\n.subdirector > li:first-child,\r\n.departments > li:first-child{\t\r\n\twidth: 18.59894921190893%;\r\n\theight: 64px;\r\n\tmargin: 0 auto 92px auto;\t\t\r\n\tpadding-top: 25px;\r\n\tborder-bottom: 4px solid white;\r\n\tz-index: 1;\t\r\n}\r\n\r\n@media print {\r\n    .subdirector > li:first-child,\r\n    .departments > li:first-child{\r\n        border-bottom: 4px solid #000;\r\n    }\r\n}\r\n\r\n.subdirector > li:first-child{\r\n\tfloat: right;\r\n\tright: 27.2%;\r\n\tborder-left: 4px solid white;\r\n}\r\n\r\n@media print {\r\n    .subdirector > li:first-child{\r\n\t    border-left: 4px solid black;\r\n    }   \r\n}\r\n\r\n.departments > li:first-child{\t\r\n\tfloat: left;\r\n\tleft: 27.2%;\r\n\tborder-right: 4px solid white;\t\r\n}\r\n\r\n@media print {\r\n    .departments > li:first-child{\r\n        border-right: 4px solid black;\t\r\n    }\r\n}\r\n\r\n.subdirector > li:first-child a,\r\n.departments > li:first-child a{\r\n\twidth: 100%;\r\n}\r\n\r\n.subdirector > li:first-child a{\t\r\n\tleft: 25px;\r\n}\r\n\r\n@media screen and (max-width: 767px){\r\n\t.subdirector > li:first-child,\r\n\t.departments > li:first-child{\r\n\t\twidth: 40%;\t\r\n\t}\r\n\r\n\t.subdirector > li:first-child{\r\n\t\tright: 10%;\r\n\t\tmargin-right: 2px;\r\n\t}\r\n\r\n\t.subdirector:after{\r\n\t\tleft: 49.8%;\r\n\t}\r\n\r\n\t.departments > li:first-child{\r\n\t\tleft: 10%;\r\n\t\tmargin-left: 2px;\r\n\t}\r\n}\r\n\r\n\r\n.departments > li:first-child a{\r\n\tright: 25px;\r\n}\r\n\r\n.department:first-child,\r\n.departments li:nth-child(2){\r\n\tmargin-left: 0;\r\n\tclear: left;\t\r\n}\r\n\r\n.departments:after{\r\n\tcontent: \"\";\r\n\tdisplay: block;\r\n\tposition: absolute;\r\n\twidth: 81.1%;\r\n\theight: 22px;\t\r\n\tborder-top: 4px solid #fff;\r\n\tborder-right: 4px solid #fff;\r\n\tborder-left: 4px solid #fff;\r\n\tmargin: 0 auto;\r\n\ttop: 130px;\r\n\tleft: 9.1%\r\n}\r\n\r\n@media print {\r\n    .departments:after{\r\n        border-top: 4px solid #000;\r\n        border-right: 4px solid #000;\r\n        border-left: 4px solid #000;\r\n    }\r\n}\r\n\r\n@media screen and (max-width: 767px){\r\n\t.departments:after{\r\n\t\tborder-right: none;\r\n\t\tleft: 0;\r\n\t\twidth: 49.8%;\r\n\t}  \r\n}\r\n\r\n@media screen and (min-width: 768px){\r\n\t.department:first-child:before,\r\n   .department:last-child:before{\r\n    border:none;\r\n  }\r\n}\r\n\r\n.department:before{\r\n\tcontent: \"\";\r\n\tdisplay: block;\r\n\tposition: absolute;\r\n\twidth: 0;\r\n\theight: 22px;\r\n\tborder-left: 4px solid white;\r\n\tz-index: 1;\r\n\ttop: -22px;\r\n\tleft: 50%;\r\n\tmargin-left: -4px;\r\n}\r\n\r\n@media print {\r\n    .department:before{\r\n        border-left: 4px solid black;\r\n    }\r\n}\r\n\r\n.department{\r\n\tborder-left: 4px solid #fff;\r\n\twidth: 18.59894921190893%;\r\n\tfloat: left;\r\n\tmargin-left: 1.751313485113835%;\r\n\tmargin-bottom: 60px;\r\n}\r\n\r\n@media print {\r\n    .department{\r\n\t    border-left: 4px solid #000;\r\n    }\r\n}\r\n\r\n.lt-ie8 .department{\r\n\twidth: 18.25%;\r\n}\r\n\r\n@media screen and (max-width: 767px){\r\n\t.department{\r\n\t\tfloat: none;\r\n\t\twidth: 100%;\r\n\t\tmargin-left: 0;\r\n\t}\r\n\r\n\t.department:before{\r\n\t\tcontent: \"\";\r\n\t\tdisplay: block;\r\n\t\tposition: absolute;\r\n\t\twidth: 0;\r\n\t\theight: 60px;\r\n\t\tborder-left: 4px solid white;\r\n\t\tz-index: 1;\r\n\t\ttop: -60px;\r\n\t\tleft: 0%;\r\n\t\tmargin-left: -4px;\r\n\t}\r\n\r\n\t.department:nth-child(2):before{\r\n\t\tdisplay: none;\r\n\t}\r\n}\r\n\r\n.department > a{\r\n\tmargin: 0 0 -26px -4px;\r\n\tz-index: 1;\r\n}\r\n\r\n.department > a:hover{\t\r\n\theight: 80px;\r\n}\r\n\r\n.department > ul{\r\n\tmargin-top: 0px;\r\n\tmargin-bottom: 0px;\r\n}\r\n\r\n.department li{\t\r\n\tpadding-left: 25px;\r\n\tborder-bottom: 4px solid #fff;\r\n\theight: 80px;\t\r\n}\r\n\r\n@media print {\r\n    .department li{\r\n        border-bottom: 4px solid #000;\r\n    }\r\n}\r\n\r\n.department li a{\r\n\tbackground: #fff;\r\n\ttop: 48px;\t\r\n\tposition: absolute;\r\n\tz-index: 1;\r\n\twidth: 90%;\r\n\theight: 60px;\r\n\tvertical-align: middle;\r\n\tright: -1px;\r\n\tbackground-image: url(data:image\/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA\/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMjUiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);\r\n\tbackground-image: -moz-linear-gradient(-45deg,  rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 100%) !important;\r\n\tbackground-image: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,0.25)), color-stop(100%,rgba(0,0,0,0)))!important;\r\n\tbackground-image: -webkit-linear-gradient(-45deg,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%)!important;\r\n\tbackground-image: -o-linear-gradient(-45deg,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%)!important;\r\n\tbackground-image: -ms-linear-gradient(-45deg,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%)!important;\r\n\tbackground-image: linear-gradient(135deg,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%)!important;\r\n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40000000', endColorstr='#00000000',GradientType=1 );\r\n}\r\n\r\n.department li a:hover{\r\n\tbox-shadow: 8px 8px 9px -4px rgba(0,0,0,0.1);\r\n\theight: 80px;\r\n\twidth: 95%;\r\n\ttop: 39px;\r\n\tbackground-image: none!important;\r\n}\r\n\r\n\/* Department\/ section colors *\/\r\n.department.dep-a a{ background: #FFD600; }\r\n.department.dep-b a{ background: #AAD4E7; }\r\n.department.dep-c a{ background: #FDB0FD; }\r\n.department.dep-d a{ background: #A3A2A2; }\r\n.department.dep-e a{ background: #f0f0f0; }<\/pre>\n
Update the colors of departments by modifying the background color in the CSS code. Adjust the names and links to match your organization’s departments and sections.<\/p>\n
That’s all! hopefully, you have successfully created a Responsive Organization Chart on your website. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This pure CSS code snippet helps you to create a responsive organization chart. The chart is responsive, adapting to various…<\/p>\n","protected":false},"author":1,"featured_media":10601,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[111],"tags":[],"class_list":["post-10589","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chart-graph"],"acf":[],"yoast_head":"\nResponsive Organization Chart Using Pure CSS — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Responsive Organization Chart Using Pure CSS. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/chart-graph\/responsive-organization-chart-using-pure-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsive Organization Chart Using Pure CSS — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Responsive Organization Chart Using Pure CSS. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/chart-graph\/responsive-organization-chart-using-pure-css\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-03T10:30:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-04T03:30:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Responsive-Organization-Chart-Using-Pure-CSS.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"980\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/chart-graph\/responsive-organization-chart-using-pure-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/chart-graph\/responsive-organization-chart-using-pure-css\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Responsive Organization Chart Using Pure CSS\",\"datePublished\":\"2024-03-03T10:30:00+00:00\",\"dateModified\":\"2024-03-04T03:30:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/chart-graph\/responsive-organization-chart-using-pure-css\/\"},\"wordCount\":237,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/chart-graph\/responsive-organization-chart-using-pure-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Responsive-Organization-Chart-Using-Pure-CSS.png\",\"articleSection\":[\"Chart & Graph\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/chart-graph\/responsive-organization-chart-using-pure-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/chart-graph\/responsive-organization-chart-using-pure-css\/\",\"url\":\"https:\/\/codehim.com\/chart-graph\/responsive-organization-chart-using-pure-css\/\",\"name\":\"Responsive Organization Chart Using Pure CSS — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/chart-graph\/responsive-organization-chart-using-pure-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/chart-graph\/responsive-organization-chart-using-pure-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Responsive-Organization-Chart-Using-Pure-CSS.png\",\"datePublished\":\"2024-03-03T10:30:00+00:00\",\"dateModified\":\"2024-03-04T03:30:43+00:00\",\"description\":\"Here is a free code snippet to create a Responsive Organization Chart Using Pure CSS. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/chart-graph\/responsive-organization-chart-using-pure-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/chart-graph\/responsive-organization-chart-using-pure-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/chart-graph\/responsive-organization-chart-using-pure-css\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Responsive-Organization-Chart-Using-Pure-CSS.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Responsive-Organization-Chart-Using-Pure-CSS.png\",\"width\":1280,\"height\":980,\"caption\":\"Responsive Organization Chart Using Pure CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/chart-graph\/responsive-organization-chart-using-pure-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Chart & Graph\",\"item\":\"https:\/\/codehim.com\/category\/chart-graph\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Responsive Organization Chart Using Pure CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Responsive Organization Chart Using Pure CSS — CodeHim","description":"Here is a free code snippet to create a Responsive Organization Chart Using Pure CSS. You can view demo and download the source code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/chart-graph\/responsive-organization-chart-using-pure-css\/","og_locale":"en_US","og_type":"article","og_title":"Responsive Organization Chart Using Pure CSS — CodeHim","og_description":"Here is a free code snippet to create a Responsive Organization Chart Using Pure CSS. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/chart-graph\/responsive-organization-chart-using-pure-css\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-03-03T10:30:00+00:00","article_modified_time":"2024-03-04T03:30:43+00:00","og_image":[{"width":1280,"height":980,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Responsive-Organization-Chart-Using-Pure-CSS.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/chart-graph\/responsive-organization-chart-using-pure-css\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/chart-graph\/responsive-organization-chart-using-pure-css\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Responsive Organization Chart Using Pure CSS","datePublished":"2024-03-03T10:30:00+00:00","dateModified":"2024-03-04T03:30:43+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/chart-graph\/responsive-organization-chart-using-pure-css\/"},"wordCount":237,"commentCount":1,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/chart-graph\/responsive-organization-chart-using-pure-css\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Responsive-Organization-Chart-Using-Pure-CSS.png","articleSection":["Chart & Graph"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/chart-graph\/responsive-organization-chart-using-pure-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/chart-graph\/responsive-organization-chart-using-pure-css\/","url":"https:\/\/codehim.com\/chart-graph\/responsive-organization-chart-using-pure-css\/","name":"Responsive Organization Chart Using Pure CSS — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/chart-graph\/responsive-organization-chart-using-pure-css\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/chart-graph\/responsive-organization-chart-using-pure-css\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Responsive-Organization-Chart-Using-Pure-CSS.png","datePublished":"2024-03-03T10:30:00+00:00","dateModified":"2024-03-04T03:30:43+00:00","description":"Here is a free code snippet to create a Responsive Organization Chart Using Pure CSS. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/chart-graph\/responsive-organization-chart-using-pure-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/chart-graph\/responsive-organization-chart-using-pure-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/chart-graph\/responsive-organization-chart-using-pure-css\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Responsive-Organization-Chart-Using-Pure-CSS.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Responsive-Organization-Chart-Using-Pure-CSS.png","width":1280,"height":980,"caption":"Responsive Organization Chart Using Pure CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/chart-graph\/responsive-organization-chart-using-pure-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Chart & Graph","item":"https:\/\/codehim.com\/category\/chart-graph\/"},{"@type":"ListItem","position":3,"name":"Responsive Organization Chart Using Pure CSS"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":1689,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/10589","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=10589"}],"version-history":[{"count":1,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/10589\/revisions"}],"predecessor-version":[{"id":11274,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/10589\/revisions\/11274"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/10601"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=10589"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=10589"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=10589"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}