Org Chart all “Wonky”

When designing the chart, this is what I see. The page, however, looks really very different.

Hi @darthpie.

When we checked the screenshot, we didn’t notice any issues with the CSS, by the way, we checked the URL you sent and didn’t find any chart there.

Can you provide a live link and say exactly what is not working correctly?

Thanks.

Oh I’m sorry! I had it as a draft. Here you go: https://scsante.org/org-chart/

The screenshot is what I see when I’m creating/editing the flowchart. It looks good on the admin side. It’s when it’s applied to the front end where it goes “wonky”.

Hi @darthpie.

Add this CSS code to your website style.

#wpdevart_org_chart_container_parent_1 div{
     vertical-align:top !important;
}
#wpdevart_org_chart_container_parent_1 li{
    vertical-align:top !important;
}
#wpdevart_org_chart_container_parent_1 div{
     vertical-align:top !important;
}
#wpdevart_org_chart_container_parent_1 ul{
    vertical-align:top !important;
}
.wpdevart_org_chart_container{
    text-align:center !important;
}
.wpdevart_org_chart_container_parent .wpdevart_org_chart_container ul{
   padding-top: 20px !important;
    margin: 0 !important;
    padding-left: 0 !important;
}
.wpdevart_org_chart_container li{
    padding: 20px 5px 0 5px !important;
    line-height: 0 !important;
    margin: 0 !important;
}
#wpdevart_org_chart_container_1 li{
    margin-top: 1px !important;
}

After adding this code, clear your website and browser caches and check it again. This should fix some CSS issues. There is a conflict between your theme and minify file and our plugin, so the chart does not work correctly.

Thanks.