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

**URL:** <https://forum.inductiveautomation.com/t/perspective-displaying-label-centre-aligned-for-small-and-left-aligned-otherwise-for-column-container/38883>\
**Category:** Ignition\
**Tags:** ignition80, perspective\
**Created:** [September 21, 2020, 3:45am UTC](https://forum.inductiveautomation.com/t/perspective-displaying-label-centre-aligned-for-small-and-left-aligned-otherwise-for-column-container/38883 "2020-09-21T03:45:09Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [September 21, 2020, 3:45am UTC](https://forum.inductiveautomation.com/t/perspective-displaying-label-centre-aligned-for-small-and-left-aligned-otherwise-for-column-container/38883/1 "2020-09-21T03:45:09Z")

</div>

v8.1.0

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?

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [September 21, 2020, 5:04am UTC](https://forum.inductiveautomation.com/t/perspective-displaying-label-centre-aligned-for-small-and-left-aligned-otherwise-for-column-container/38883/2 "2020-09-21T05:04:38Z")

</div>

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%?

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [September 21, 2020, 5:32am UTC](https://forum.inductiveautomation.com/t/perspective-displaying-label-centre-aligned-for-small-and-left-aligned-otherwise-for-column-container/38883/3 "2020-09-21T05:32:30Z")

</div>

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

Small (client)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/7/c7c469fe5a46f7ebfda47226bc244a55aaee632a.png)  
Large (client)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/4/b4fbb8501b0661ed8ee29195c98fa3d680908618.png)

Small (designer)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/a/fa6d5bd1a789f9aba52a91ea81b6ef62ad922ec3.png)  
Large (designer)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/0/901076e52095838714b80e0ea17e4e157a26fff2.png)

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…

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [September 21, 2020, 5:37am UTC](https://forum.inductiveautomation.com/t/perspective-displaying-label-centre-aligned-for-small-and-left-aligned-otherwise-for-column-container/38883/4 "2020-09-21T05:37:38Z")

</div>

> [@nminchin](#):
>
> Sorry, I was talking about text alignment. I completely forgot about media queries, that answers my question 🙂

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