- This topic has 5 replies, 2 voices, and was last updated 3 years ago by Leo.
November 26, 2017 at 4:58 pm #435083David
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?
thanksNovember 26, 2017 at 6:08 pm #435120LeoStaffCustomer SupportNovember 26, 2017 at 7:13 pm #435165David
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.November 26, 2017 at 9:33 pm #435255LeoStaffCustomer Support
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.November 26, 2017 at 11:17 pm #435316David
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.
DavidNovember 27, 2017 at 7:44 am #435764
- You must be logged in to reply to this topic.