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?
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).
Sorry… I use Stacks3 almost exclusively for pages and those are nicely responsive. Thanks, I’ll start looking at CSS solutions.
Nevermind…
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.
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.