Elementor logo

Elementor – Orphan column fix

Get the Latest from Sniffle Valve

Sniffle Valve logo

If you find this tutorial to be helpful and of use, consider buying Sniffle Valve a coffee  

For help with the content presented in this tutorial, book a one-on-one online training session


There may be times when you want the display of multiple sections of multiple columns to be a certain size on tablet and mobile views. With Elementor 1.5 and up, one can manually set the column widths for the various viewport sizes. This however may produce what has been called “orphan columns” in that the subsequent row of columns doesn’t reflow to take up the empty space in the section that precedes it.

It should be noted that the sections (columns) will appear stacked within the Elementor editor. This is the one “drawback” of this method but it does get the the job done 🙂

This tutorial shows you how to fix this.

 

Here is the CSS that is used in the video:

/* Set 3 columns on desktop */
.one-col {
    display: inline-block;
    position: relative;
    width: 33%;
}

/* Set 2 columns on tablet */
@media (max-width: 1024px) {
    .one-col {
    width: 50%;
    }
}

/* Set 1 columns on iPhone 5 */
@media (max-width: 320px) {
    .one-col {
    width: 100%;
    }
}

/* Set 1 columns on iPhone 6/7 */
@media (max-width: 375px) {
    .one-col {
    width: 100%;
    }
}
Orphan column fix CSS