Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Resolved] Question about Columns

Home Forums Support [Resolved] Question about Columns

Home Forums Support Question about Columns

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #598149
    Linden

    Hey Guys,

    I was wondering if I could pick your brains? I’m having trouble with responsive columns in my site. I’m using the GP Lightweight Columns plugin.

    When I shrink the site down to mobile view, the images switch and don’t sit at the top. How can I keep the image at the top of the column? (You’ll see what I mean when you try it) 😊

    Cheers

    Linden

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #598196
    David
    Staff
    Customer Support

    Hi Liden,

    LGC plugin uses the Unsemantic grid which has Push and Pull classes you can add to the short codes they are listed here:

    https://unsemantic.com/css-documentation.html#6-push-amp-pull-classes

    The shortcode content will look a little like this (square brackets omitted):

    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”

    The method works in mobile order first and the push / pull is for desktop. So you need to put your content in mobile order first. And then use the push pull classes to re-arrange them for desktop.

    Let me know

    #598216
    Linden

    Hello David,

    That worked brilliantly! – Thank you very much.

    Just one more thing… How can I vertically align the text to sit in the middle of the image?

    Linden

    #598361
    David
    Staff
    Customer Support

    We can try adding some flexbox magic to the column container like so:

    .inside-grid-column {
        height: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
    #598363
    Linden

    Perfect! Thanks so much for your help 👍👍😊

    Linden

    #598365
    David
    Staff
    Customer Support
    #598561
    Linden

    Sorry… When you shrink down the browser manually, on some resolutions, the images all flip over to the left hand size.

    Any suggestions on how to fix this?

    Linden

    #598576
    David
    Staff
    Customer Support

    Hi Linden, you can try adding the Push classes for tablet:

    tablet-push-50
    tablet-pull-50
    #598849
    Linden

    Hi David,

    Fab. That works, thank you! ☺️

    Linden

    #598886
    David
    Staff
    Customer Support

    Great to hear that Linden!

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.