Archived topic
Lightweight Grid Columns and version 3.0
9 replies · Started by ch1800 on October 7, 2020
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?
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. :)
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?
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;
}
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]
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/
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?
Hi there,
yes thats correct - they would also require the Float method.
Thanks David.
You're welcome