Is it possible to have a column element inside another column element?

Hey dburton77,

Nested columns is currently not supported unfortunately.

Best regards,
Rikard

Hi,

Thank you for the update.

You can still create nested columns by inserting a Text or Code Block element inside a Column element. Just add a single div as the main container and set its display to flex. Example:

HTML:

<div class="av-nested-column">
        <div class="av-nested-column-one-half">
            <p>This is the first column.</p>
        </div>
        <div class="av-nested-column-one-half">
            <p>This is the second column.</p>
        </div>
    </div>

CSS:

.av-nested-column {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
    padding: 20px;
}

.av-nested-column-one-half {
    width: 50%;
    padding: 20px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .av-nested-column-one-third,
    .av-nested-column-one-fifth,
    .av-nested-column-one-fourth,
    .av-nested-column-one-half {
        width: 100%;
    }
}

For other sizes (1/3, 1/4 etc), add this:

.av-nested-column-one-third {
    width: 33.33%;
    padding: 20px;
    box-sizing: border-box;
}

.av-nested-column-one-fifth {
    width: 20%;
    padding: 20px;
    box-sizing: border-box;
}

.av-nested-column-one-fourth {
    width: 25%;
    padding: 20px;
    box-sizing: border-box;
}

Best regards,
Ismael