Archived topic
lgc-first and lgc-last styling on mobile devices
5 replies · Started by David on November 26, 2017
Hi there,
I've applied different styles for some 50/50 columns using your Lightweight grid columns plugin, based on position being either first or last for the grid.
However when viewing on mobile devices, I noticed that lgc-first and lgc-last classes are added to both the first and last columns, presumably because they are now single columns.
This then makes the css styles for the lgc-last class to be applied to both the first and last columns, since the lgc-last styles I have listed after the lgc-first css styles, in stylesheet.
Is there anyway that I can get around this, so that I can still style the columns separately for
mobile devices (single column), or is it best just to use something like .lgc-first:nth-child(1) and .lgc-last:nth-child(2) in responsive media queries?
thanks
Hi there,
I'm not too sure what you mean?
Can you link me to the page in question?
Keep in mind that you also have the option to add custom class to LGC.
Let me know :)
Hi Leo,
sorry it's on my machine only at moment, local development. I've done a short screen recording with explanation, hope makes more sense. Shows grid on desktop, then on mobile, then with use of nth-child selector to override the lgc-first and lgc-last styles.
I first tried adding a class to the shortcode, though it adds this class to "inside-grid-column" div rather than "lgc-grid" parent div, so won't work for background colour in this case. So went with nth child selector instead, which seems to work well.
Ahh I see what you are saying.
Maybe give Griddable a shot: https://docs.generatepress.com/article/creating-columns/
It's actually our new recommendation now.
Personally I prefer the built-in unsemantic grid method showing on that page. I find it much easier to control.
Thanks Leo, appreciate the suggestions. I'll stay with Lightweight grid columns for this project as it is quite far along in development, but will take on board your ideas for next time.
kind regards
David
No problem!
