Question about Columns

Hi Liden,

LGC plugin uses the Unsemantic grid which has Push and Pull classes you can add to the short codes they are listed here:

https://unsemantic.com/css-documentation.html#6-push-amp-pull-classes

The shortcode content will look a little like this (square brackets omitted):

First on mobile, second on desktop:
lgc_column grid=”50″ tablet_grid=”50″ mobile_grid=”100″ class=”push-50″

Second on mobile, first on desktop:
lgc_column grid=”50″ tablet_grid=”50″ mobile_grid=”100″ class=”pull-50 last=”true”

The method works in mobile order first and the push / pull is for desktop. So you need to put your content in mobile order first. And then use the push pull classes to re-arrange them for desktop.

Let me know

Hello David,

That worked brilliantly! - Thank you very much.

Just one more thing... How can I vertically align the text to sit in the middle of the image?

Linden

We can try adding some flexbox magic to the column container like so:

.inside-grid-column {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

Perfect! Thanks so much for your help 👍👍😊

Linden

Glad to be of help!

Sorry... When you shrink down the browser manually, on some resolutions, the images all flip over to the left hand size.

Any suggestions on how to fix this?

Linden

Hi Linden, you can try adding the Push classes for tablet:

tablet-push-50
tablet-pull-50

Hi David,

Fab. That works, thank you! ☺️

Linden

Great to hear that Linden!