How to add lines like example shown in design?

[weribinc]

Hi there,

I am replicating this website in X theme and am running into a challenge on this page trying to copy the lines that connect the icons. You can see my working page here: http://obsidian.simplifiedseo.com/solutions/payroll-services/

I have tried to emulate the CSS but can’t seem to do it successfully. Can you help?

Summary

[weribinc]

The site is: http://obsidian.simplifiedseo.com/

[ruenel]

Hello @weribinc,

Thanks for writing in! I have inspected the example site and it is using a custom css that adds the lines. It is using this custom css:

.solution-section .single-solution:before {
    content: '';
    position: absolute;
    top: calc((150px / 1) - 20px);
    left: calc(150px / 2);
    background: #e5e5e5;
    width: 1px;
    height: 100%;
}

.solution-section .single-solution:nth-child(odd):before {
    height: calc(100% + 180px);
    top: -50px;
}

.solution-section .single-solution:first-child:before {
    height: calc(100% + 129px);
    top: 0;
}

.solution-section .single-solution:after {
    content: '';
    position: absolute;
    top: 130px;
    right: 100%;
    background: #e5e5e5;
    width: 335px;
    height: 1px;
}

.solution-section .single-solution:nth-child(odd):after {
    right: auto;
    left: calc(150px / 2);
    top: -50px;
    width: 411px;
}

This css will not work in your current X theme page because they do not have the same structure. You will need to apply the custom classes (solution-section and single-solution) to your column and feature box so that the lines may appear in your page. Regretfully this require custom css which is beyond the scope of our support.

Just to manage your expectations, this isn’t specifically a theme issue, but rather, your customisation of it. So whilst I have happily provided you with some guidance above on how to get it working, we cannot provide theme customisation as a general rule, or support custom code solutions provided. Therefore, you might find it helpful to check out the following:

CSS Selector Reference
How to find the css selector in chrome

Thank you for your understanding.