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?
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.