1/8 Column

[89Flay]

Hi,

I need to make an 1/8 column, which every parts has an image as background and a custom icon/image+text over it, like in this website:
http://www.villaadhoc.it/coworking-network-professionale/

but without space between the columns.

Cornerstone make me build just 1/6 column. How do I achieved it?

Thank you in advance.

[Prasant]

Hello Flay,

Thanks for writing in!

In Cornerstone max column that one can have is 6 column layout and for that one will have to use custom layout option. To have 8 column layout, please add following code in Cornerstone text element:

<div id="section">
<div class="x-column x-sm x-1-8">Content here</div>
<div class="x-column x-sm x-1-8">Content here</div>
<div class="x-column x-sm x-1-8">Content here</div>
<div class="x-column x-sm x-1-8">Content here</div>
<div class="x-column x-sm x-1-8">Content here</div>
<div class="x-column x-sm x-1-8">Content here</div>
<div class="x-column x-sm x-1-8">Content here</div>
<div class="x-column x-sm x-1-8">Content here</div>
</div>

Thanks.

[89Flay]

Hi Prasant,

thanks for the tip.
So I made one column with the text element and inside I put your code, but unfortunately it divide in 8 column but some of them goes below and they don’t scale, I would need them to be on the same line. See pic here attached:
So is it possible to have them in one column, and after that, how I managed to put a different background with text and custom icon above each of them? Like here:

Thanks in advance for your help.
Kind Regards.
Flavio

[jade]

Hi Flavio,

X only has the default CSS codes that will correctly display up to 6 columns.

In continuation to what Prasant suggested, you will also need to add this custom CSS in X > Theme Options > CSS:

@media (min-width: 768px) {
    .x-column.x-1-8 {
        width: 9%;
        background: center center/cover no-repeat;
    }
}

Then to add a background to the columns, you will have to hard code the background setting from the HTML code you previously added. For example;

<div style="background-image: url(URL_OF_THE_BACKGROUND_IMAGE);" class="x-column x-sm x-1-8">Content here</div>

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

[89Flay]

Hi Jade,

Ok thank you, I’ll try that.

[ruenel]

Great!
Please let us know if this works out for you.