Docs

[arefs]

Is there a way to create a feature list with dotted lines between each block which runs horizontally across the pages rather than vertically down it?

I’ve searched the forum but no one else appears to have asked this question. I’m a little surprised about this but there we go.

If it is not possible to re-orientate the feature list element through some custom CSS, how can I create the same effect through linking featured boxes across the page?

Thanks.

[Rue Nel]

Hello There,

Thanks for writing in! Regretfully the feature list element were designed to be displayed vertically. What I can recommend to have a horizontally align feature list, is to have a 2/3 column row and insert a feature box in each of the columns. I am not sure though of how it would look like with the connectors. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thank you.

[arefs]

I’ve added 4x featured boxes to my website under the section “How it works”.

I want to join each icon with a dotted line to show this is a process. i.e. just like the featured list but horizontal.

How can I do this?

Thanks.

[Rue Nel]

Hello There,

Thanks for getting back to us. To connect each icons in your feature box, please edit your page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

#x-section-7 .x-column .x-feature-box-graphic:before {
    content: "";
    display: block;
    position: absolute;
    top: 30px;
    left: 60%;
    border-top: dashed 1px #333;
    width: 100%;
}

#x-section-7 .x-column.last .x-feature-box-graphic:before, 
#x-section-7 .x-column:last-of-type .x-feature-box-graphic:before {
    display: none;
}

I could find the section “How it works” because I am assuming that this, http://www.prfxxst.cxm/, is the page in question. You can replace the section number to make sure that it will work in the right page.

Please let me know how it goes.

[arefs]

This reply has been marked as private.

[Jade]

Hi there,

Please give this code a go:

#how-it-works .x-column .x-feature-box-graphic:before {
    content: "";
    display: block;
    position: absolute;
    top: 30px;
    left: 60%;
    border-top: dashed 1px #333;
    width: 100%;
}

#how-it-works .x-column.last .x-feature-box-graphic:before, 
#how-it-works .x-column:last-of-type .x-feature-box-graphic:before {
    display: none;
}

Hope this helps.

[arefs]

A rare instance of CSS working the first time 🙂

Thank you.

[Friech]

We’re delighted to assist you with this.

Cheers!

[Author]

Posts