- This topic has 21 replies, 4 voices, and was last updated 3 years, 3 months ago by
Tom.
-
AuthorPosts
-
February 1, 2017 at 1:20 am #272698
Lyle
Hi Tom, et al 🙂
As the title states, I would like to reverse the column order of the LGC columns on mobile. I have a homepage with 2 columns and would like the second column to be on top on mobile if that’s possible. It’s a snap to do with a page builder, but for this site, I am avoiding them 🙂
Cheers!
Lylehttp://snifflevalve.com
Tutorials and tips for GeneratePress, WP Show Posts, WordPress and ElementorGeneratePress 1.3.44GP Premium 1.2.94February 1, 2017 at 8:30 am #272868Leo
StaffCustomer SupportHi Lyle,
I have no idea how to do it with code but maybe you can make two sets of them and hide one on desktop/tablet and one of mobile?
I guess we will hear it from Tom 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/February 1, 2017 at 9:48 am #272908Tom
Lead DeveloperLead DeveloperBest way to do it is to use the push- and pull- classes.
This way, you order your columns for mobile, and then push and pull them to display in a different order on desktop.
More here: http://unsemantic.com/css-documentation#6-push-amp-pull-classes
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentFebruary 1, 2017 at 10:08 am #272929Lyle
Thanks Tom and Leo,
In my research before posting, I came across these classes but thought that they were only applicable to the Bootstrap framework. Had a look through the unsenmantic docs but obviously, not a good enough one 🙂
That should do it 🙂
http://snifflevalve.com
Tutorials and tips for GeneratePress, WP Show Posts, WordPress and ElementorFebruary 1, 2017 at 10:19 am #272931Tom
Lead DeveloperLead DeveloperYep – that’s how the sidebars in GP work 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentFebruary 1, 2017 at 4:55 pm #273059Lyle
Sorry Tom, I’m in dunce mode today 🙂
Tried various iterations from the unsemantic link you provided and then found this post here, and also no luck.
https://generatepress.com/forums/topic/slider-in-column-issues/
My question is, exactly where and in what format do you put the push pull values within the LGC shortcode?
This is what I have on the page now without any:lgc_column grid=”60″ tablet_grid=”60″ mobile_grid=”100″ last=”false” URL_TO_IMAGE /lgc_column
lgc_column grid=”40″ tablet_grid=”40″ mobile_grid=”100″ last=”true”
all the stuff is up here <i class=”fa fa-bars”></i>/lgc_column
Had to remove shortcode [] s
Cheers!
Lylehttp://snifflevalve.com
Tutorials and tips for GeneratePress, WP Show Posts, WordPress and ElementorFebruary 1, 2017 at 7:39 pm #273083Tom
Lead DeveloperLead DeveloperCheck out the class example here: https://wordpress.org/plugins/lightweight-grid-columns/faq/
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentNovember 6, 2017 at 10:38 am #417299Daniel
Hi Tom,
it seems i cant get my head around this one. How does push and pull work together with last=”true/false” ?
If i want to change the order of these columns on mobile – how do i do it?
[lgc_column grid=”50″ tablet_grid=”50″ mobile_grid=”100″Â last=”false”]
[/lgc_column][lgc_column grid=”50″ tablet_grid=”50″ mobile_grid=”100″Â last=”true”]
[/lgc_column]Thanks in advance,
DanielNovember 6, 2017 at 10:36 pm #417553Tom
Lead DeveloperLead DeveloperThe order isn’t changed on mobile – the order on mobile follows whatever order the columns are written in.
The order is reversed on desktop, using the push/pull classes which literally push and pull elements into separate horizontal positions.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentNovember 7, 2017 at 12:48 am #417608Daniel
Thanks Tom,
i still can’t get this to work on my website. I tried this:
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”Where is my error? Where does the “last”-parameter belong? I also tried it on the first column, which did not work either.
Big thanks in advance,
DanielNovember 7, 2017 at 8:42 am #417881Tom
Lead DeveloperLead DeveloperThat looks like it should work. Can you link me to that page?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentNovember 7, 2017 at 9:11 am #417912Daniel
Sure: http://gritsch.netzspinnerei.at/ (in development)
When you scroll down below the header, the second and fourth row should be in reverse order. Instead they looks broken right now.
(the rows with Innovation „G-Manu“ and Collaboration „Osttirolportal“.)I double checked the shortcodes, could not find an error.
Thanks!
DanielNovember 7, 2017 at 9:03 pm #418186Tom
Lead DeveloperLead DeveloperAh, that plugin needs an update. Can you try the latest files we have on GitHub?: https://github.com/tomusborne/lightweight-grid-columns
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentNovember 8, 2017 at 2:07 am #418272Daniel
Hi Tom,
i updated and it changed something, but it still does not work. The “pull-50” columns seem to float on the left side now.
thx for your help,
DanielNovember 8, 2017 at 10:08 am #418637Tom
Lead DeveloperLead DeveloperYour first/last elements need to go like this:
first
lastfirst
lastfirst
lastAnd so on.
Right now you have:
first
lastlast
firstDocumentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.