Simple & Easy Help
for WordPress Beginners

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

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.

https://youtu.be/JYi_mQ8XNvQ

 

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