[Resolved] Lightweight Grid Columns and version 3.0

[ch1800]

What is the recommendation for sites already using Lightweight Grid Columns with new version 3.0 of the theme?
In my case I’m not using blocks and not planning to, so my question does not relate to Generateblocks.

– keep them as they are and leave customizer settings set for Floats?
– convert sections using “lgc_column grid” to flex?

For the latter, is there any guide for converting those shortcodes to Flex?

[Elvin]

Hi,

Lightweight Grid Columns is pretty much obsolete so there’s no future versions that will easily allow users to convert it to flex.

The actual recommendation is to use GenerateBlocks as it is literally the direct successor of LGC but since you’ve mentioned you don’t want to use it. Let’s skip that.

I’m afraid the only way to convert Lightweight Grid Columns to flex is to use custom CSS codes on it.

There’s no official guide to converting those to flex. But we can help in providing the CSS code if you link us to your page. 🙂

A wise man once said:
"Have you cleared your cache?"

[ch1800]

Thanks Elvin,

Yes, that’s what I thought also.
I have several sites using 2 or 3 columns with those typical shortcodes:

[lgc_column grid="25" tablet_grid="25" mobile_grid="100" last="false"]
[/lgc_column]
[lgc_column grid="50" tablet_grid="50" mobile_grid="100" last="false"]
[/lgc_column]

I added here a URL of one of those that has both 2 and 3 columns at homepage.
What would be the equivalent with CSS?

[Elvin]

You can convert its parents to flex by doing something like this.

#generate-section1 .grid-container.grid-parent.generate-sections-inside-container,
#generate-section2 .grid-container.grid-parent.generate-sections-inside-container {
    display: flex;
    flex-direction: row;
}

And you can convert the actual column to be a flexbox too by using its selector .lgc-column

Something like this:

.lgc-column{
display:flex;
}

A wise man once said:
"Have you cleared your cache?"

[ch1800]

Sorry, I don’t get it.
What “parents” mean please?
What does it mean to “convert” the column to be a flexbox? Is this a global CSS or specific to a page using grids?

Can you give me an example for something like this?

[lgc_column grid=”50″ tablet_grid=”50″ mobile_grid=”100″ last=”false”]
first column text here
[/lgc_column]

[lgc_column grid=”50″ tablet_grid=”50″ mobile_grid=”100″ last=”true”]
second column text here
[/lgc_column]

[Elvin]

My apologies. I should’ve been more concise.

– keep them as they are and leave customizer settings set for Floats?
– convert sections using “lgc_column grid” to flex?

After re-reading your questions, perhaps I went too far ahead. Were you just asking if its necessary to convert LGC to flex? If so, the answer is no. You can keep it as is.

Using flex has its advantages in formatting. But if you’re happy with your current layout, you really don’t have to convert things to flex.

What “parents” mean please?

What I meant with “parents” is the container HTML element your LGC shortcode is placed on.

It is somewhat necessary to apply display:flex; on them if you want their child(the columns) to be able to use flexbox properties.

What does it mean to “convert” the column to be a flexbox? Is this a global CSS or specific to a page using grids?

Converting a column into a flexbox means changing its css display property to flex. More in-depth explanation provided here. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

A wise man once said:
"Have you cleared your cache?"

[ch1800]

OK, here we are then.
From your answer I understand there is no point in converting anything and this was my initial guess but wanted a confirmation.

The whole interest seems to be for new sites only. Thanks for the link, I’ll check this further.

One more:
I have other sections using this (with additional CSS on that page):

<div class="grid-container">
<div class="grid-100 mobile-grid-100 tablet-grid-100">

Is this also considered as “float” and can I also leave it as is?

[David]

Hi there,

yes thats correct – they would also require the Float method.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[ch1800]

Thanks David.

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts