Elementor – Orphan column fix

UPDATE: 28 NOV 2017

It was brought to my attention that this was not working for some folks. Turns out I had the Autoptimize plugin activated on the site used in the video. Installing and activating this plugin with the two basic settings, HTML and CSS, will allow this to work.
Autoptimize: https://wordpress.org/plugins/autoptimize/

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.

/* 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%;
    }
}