[Resolved] Columns/Grid Vertical Align Desktop (not on mobile)

Home Forums Support Columns/Grid Vertical Align Desktop (not on mobile)

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #316514
    Patricia

    Hi!

    I have vertically aligned two columns exactly as I want (on desktop), using the < div > and grid shortcode listed below. The effect is responsive, in that the 2 columns remain side-by-side even on the smaller screens, which makes the content in both columns pretty tiny.

    Could you please help me with the CSS that would allow the vertical-centering to remain on desktop/tablet, but NOT on the mobile?

    Thanks! 🙂

    image: https://ibb.co/gEA1RQ

    ______________

    MY CONTENT:

    < div class=”grid-container flex-vertical” >
    [ lgc_column grid=”50″ tablet_grid=”50″ mobile_grid=”100″ equal_heights=”false” last=”false” ]
    MY TEXT HERE
    [ /lgc_column ][ lgc_column grid=”50″ tablet_grid=”50″ mobile_grid=”100″ equal_heights=”false” last=”true” ]
    MY IMAGE HERE
    [ /lgc_column ]
    < /div >

    ADDITIONAL CSS:

    .flex-vertical{
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
    }
    ______________
    Code/solution thanks to: this thread

    p.s. I wasn’t able to get the code to show up here, so I added some spaces, hoping it makes it through. 🙂

    GeneratePress 1.3.46
    #316527
    Leo
    Staff
    Customer Support

    Hi Patricia,

    Try wrapping your CSS like this then it would only apply to tablet and desktop:

    @media (min-width: 769px) {
       /* CSS here*/
    }

    More info here: https://generatepress.com/forums/topic/how-do-i-search-for-my-previous-posts/#post-263744

    Let me know if this helps 🙂

    #316549
    Patricia

    Brilliant! Thank you so much, Leo! 🙂

    #316558
    Leo
    Staff
    Customer Support

    You’re very welcome 🙂

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