Typical ways to center text vertically on full screen but set flush to top on mobile. css?


(Greg Schneck) #1

Imagine a two column stack with an image in one column and text in the other. On bigger screens the image and text are side by side and I want the text to be vertically centered with the picture image. But on mobile screen the two items “break” and the text will set under the photo so it should simply set vertically to the top.

What is best practice to do this? With css I presume?


(Doug Bennett) #2

Greg,
What column stack are you using?

The standard column stacks are not responsive. If you are using Foundations or Foundry?

Yes CSS shoiud be used to do the breaks and centering (media Query).


(Greg Schneck) #3

Sorry… I use Stacks3 almost exclusively for pages and those are nicely responsive. Thanks, I’ll start looking at CSS solutions.


(Robert Ziebol 🖖🏼) #4

Nevermind…


(LJ) #5

you could duplicate the columns stacks and make the text stacks in the first set ‘left aligned’ and ‘only visible on desktop and/or tablet’ using the Responsive settings. The second version would be centred and only visible on mobile.


(Doug Bennett) #6

Also might want to check out this

https://stacks4stacks.com/adaptivegrid/

It will do a lot of what you want. You would have to mess with the padding.