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