[Resolved] lgc-first and lgc-last styling on mobile devices

Home Forums Support lgc-first and lgc-last styling on mobile devices

  • This topic has 5 replies, 2 voices, and was last updated 3 years ago by Leo.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #435083
    David

    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

    #435120
    Leo
    Staff
    Customer Support

    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 🙂

    #435165
    David

    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.

    https://cl.ly/1a033e0b1l26

    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.

    #435255
    Leo
    Staff
    Customer 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.

    #435316
    David

    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

    #435764
    Leo
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.