Responsive Organization Chart (updated)
-
Position Name
Name Surname
AA -
Position Name
Name Surname
AA -
Position Name
Name Surname
AA
-
Position Name
Name Surname
AA
-
Position Name
Name Surname
AA -
Position Name
Name Surname
AA
-
Position Name
Name Surname
AA -
Position Name
Name Surname
AA
-
Position Name
Name Surname
AB-
Position Name
Name Surname
AA -
Position Name
Name Surname
BB -
Position Name
Name Surname
BB -
Position Name
Name Surname
BB -
Position Name
Name Surname
BB -
Position Name
Name Surname
BB
-
Position Name
-
Position Name
Name Surname
AB-
Position Name
Name Surname
CC -
Position Name
Name Surname
AA -
Position Name
Name Surname
CC -
Position Name
Name Surname
CC -
Position Name
Name Surname
CC
-
Position Name
-
Position Name
Name Surname
AB-
Position Name
Name Surname
AA -
Position Name
Name Surname
BB -
Position Name
Name Surname
BB -
Position Name
Name Surname
BB -
Position Name
Name Surname
BB -
Position Name
Name Surname
BB
-
Position Name
-
Position Name
Name Surname
AB-
Position Name
Name Surname
AA -
Position Name
Name Surname
CC -
Position Name
Name Surname
CC -
Position Name
Name Surname
CC
-
Position Name
-
Position Name
Name Surname
AB-
Position Name
Name Surname
AA -
Position Name
Name Surname
BB -
Position Name
Name Surname
BB -
Position Name
Name Surname
BB
-
Position Name
-
Position Name
Name Surname
AB-
Position Name
Name Surname
CC -
Position Name
Name Surname
AA -
Position Name
Name Surname
CC -
Position Name
Name Surname
CC -
Position Name
Name Surname
CC
-
Position Name
-
Position Name
Name Surname
AB-
Position Name
Name Surname
AA -
Position Name
Name Surname
BB
-
Position Name
Improvments:
- media queries are separated in one place only and not all over the css (more control on it)
- 3 new style of line (a 3 block column line; a 2 block column block line; a single block line)
- use SCSS to maange easly varaibles and breakepoint
- separated the list of departments from board area (more control and less ul insie ul inside ul inside ul)
- 7 column on the department area
Responsive Example
-
Position Name
Name Surname
AA -
Position Name
Name Surname
AA -
Position Name
Name Surname
AA
-
Position Name
Name Surname
AA
-
Position Name
Name Surname
AA -
Position Name
Name Surname
AA
-
Position Name
Name Surname
AA -
Position Name
Name Surname
AA
-
Position Name
Name Surname
AB-
Position Name
Name Surname
AA -
Position Name
Name Surname
BB -
Position Name
Name Surname
BB -
Position Name
Name Surname
BB -
Position Name
Name Surname
BB -
Position Name
Name Surname
BB
-
Position Name
-
Position Name
Name Surname
AB-
Position Name
Name Surname
CC -
Position Name
Name Surname
AA -
Position Name
Name Surname
CC -
Position Name
Name Surname
CC -
Position Name
Name Surname
CC
-
Position Name
-
Position Name
Name Surname
AB-
Position Name
Name Surname
AA -
Position Name
Name Surname
BB -
Position Name
Name Surname
BB -
Position Name
Name Surname
BB -
Position Name
Name Surname
BB -
Position Name
Name Surname
BB
-
Position Name
-
Position Name
Name Surname
AB-
Position Name
Name Surname
AA -
Position Name
Name Surname
CC -
Position Name
Name Surname
CC -
Position Name
Name Surname
CC
-
Position Name
-
Position Name
Name Surname
AB-
Position Name
Name Surname
AA -
Position Name
Name Surname
BB -
Position Name
Name Surname
BB -
Position Name
Name Surname
BB
-
Position Name
-
Position Name
Name Surname
AB-
Position Name
Name Surname
CC -
Position Name
Name Surname
AA -
Position Name
Name Surname
CC -
Position Name
Name Surname
CC -
Position Name
Name Surname
CC
-
Position Name
-
Position Name
Name Surname
AB-
Position Name
Name Surname
AA -
Position Name
Name Surname
BB
-
Position Name