Using built in column in custom tempate

Support
#1

Hello,

I am needing to make some customizations to a template. I need to break one solid page up into some columns.
In bootstrap I would do something like

<class="col-md-8"><class="col-md-4">

I’m looking for a way to achieve this using whatever the inbuilt grid and column system is with this theme. Is there documentation you can point me to on how to use your grid system?

This is for a custom post type created by another plug in, so I cant just use cornerstone and shortcodes (I dont think anyway)

Thanks.

#2

Hi There,

Thank you for writing in, you can do something like this:

<!-- one column -->
<div id="section-01" class="x-section">      
    <div class="x-container max width">
        <div class="x-column x-sm x-1-1"></div>
    </div>
</div>

<!-- one-half + one-half-->
<div id="section-02" class="x-section">      
    <div class="x-container max width">
        <div class="x-column x-sm x-1-2"></div>
        <div class="x-column x-sm x-1-2"></div>
    </div>
</div>

<!-- one-thirds-->
<div id="section-03" class="x-section">      
    <div class="x-container max width">
        <div class="x-column x-sm x-1-3"></div>
        <div class="x-column x-sm x-1-3"></div>
        <div class="x-column x-sm x-1-3"></div>
    </div>
</div>

<!-- one-fourths-->
<div id="section-04" class="x-section">      
    <div class="x-container max width">
        <div class="x-column x-sm x-1-4"></div>
        <div class="x-column x-sm x-1-4"></div>
        <div class="x-column x-sm x-1-4"></div>
        <div class="x-column x-sm x-1-4"></div>
    </div>
</div>
   
<!-- 1/3 + 2/3 -->
<div id="section-05" class="x-section">      
    <div class="x-container max width">
        <div class="x-column x-sm x-1-3"></div>
        <div class="x-column x-sm x-2-3"></div>
    </div>
</div>

You can also do a custom columns combinations like x-1-5 + x-4-5
Add a unique ID to your section, so you can target it specifically later on if you need to.

Hope that helps,
Cheers!

#3

Awesome.

That’s more or less working, except that I can’t quite figure out how to make the columns take up the entire space inside the x-container div. It’s like it’s creating another smaller container inside the container.

That’s probably something you need to see the code for and I’m still in localdev.

#4

Ah I think I see it. If anyone else is reading this, the Icon stack applies some width setting to x-container. If you remove the width class from the x-container div it takes care of it. Guessing this is about the same thing that turning off inner container in cornerstone sections does.

#5

Hi,

Yes, that is actually for all stacks. If you need a full-width container just remove the CLASS max width from the x-container.

Have a nice weekend,

#6

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.