Perspective: Displaying Label centre-aligned for small and left-aligned otherwise for Column Container


I have a column container with a bunch of labels and input fields, and for mobile I want these to stack and be centred; for larger displays, they will be side-by-side (label, input field) and I want them to then become left-aligned. I can’t see how to do this?

I’m pretty sure I get what you’re asking, but if you can mock it up/draw it out I think I can help you out.

Couple questions:

  1. Is the number of label/input pairs indeterminate in a repeater?
  2. Is there a reason you can’t make each pair in a templated column container view, then put them all in a repeater with each instance’s basis set to auto
  3. If you mean left-align the text then it’s a media query, but I don’t think that’s what you meant (thought I’d cover that base though)
  4. Obviously this is taking up a whole phone screen vertically, but on a larger screen do you just want it to cover say the left 25%?

Sorry, I was talking about text alignment. I completely forgot about media queries, that answers my question :slight_smile: thanks!

Small (client)
Large (client)

Small (designer)

Large (designer)

Note: the blank space to the right in the large view is actually a group of buttons that are invisible for guest users… this blank space is my next challenge…

Guess I’m glad I threw that one in there! I was convinced that wasn’t the problem hahaha