# Easiest way to keep container square as it resizes?

**URL:** <https://forum.inductiveautomation.com/t/easiest-way-to-keep-container-square-as-it-resizes/41776>\
**Category:** Maker\
**Tags:** perspective\
**Created:** [December 24, 2020, 6:24am UTC](https://forum.inductiveautomation.com/t/easiest-way-to-keep-container-square-as-it-resizes/41776 "2020-12-24T06:24:57Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![sungkhum](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/sungkhum/32/10636_2.png) [@sungkhum](https://forum.inductiveautomation.com/u/sungkhum)\
**Post date:** [December 24, 2020, 6:24am UTC](https://forum.inductiveautomation.com/t/easiest-way-to-keep-container-square-as-it-resizes/41776/1 "2020-12-24T06:24:57Z")

</div>

What’s the easiest way to keep a container square as it resizes with larger/smaller screens?

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

On smaller screens it resizes horizontally (it’s in a flex container), but I can’t figure out how to get it to also resize vertically:

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

Thanks for your help!

---

<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:** [December 24, 2020, 12:04pm UTC](https://forum.inductiveautomation.com/t/easiest-way-to-keep-container-square-as-it-resizes/41776/2 "2020-12-24T12:04:25Z")

</div>

Assuming that the View is a row flex and the square components are contained directly at the root of the view, the horizontal width is determined by the props.basis setting. Setting it to a fixed pixel width will keep its size, assuming grow and shrink are set to 0. The vertical width can be set the same way by cutting the square component from the root and putting it into its own column flex container.  
The hierarchy is then:  
View/root (row flex)/flex (column flex)/square component.

---

<div class="post-metadata">

**Author:** ![sungkhum](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/sungkhum/32/10636_2.png) [@sungkhum](https://forum.inductiveautomation.com/u/sungkhum)\
**Post date:** [December 24, 2020, 4:09pm UTC](https://forum.inductiveautomation.com/t/easiest-way-to-keep-container-square-as-it-resizes/41776/3 "2020-12-24T16:09:14Z")

</div>

That did it - thanks so much!

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [January 2, 2021, 12:46pm UTC](https://forum.inductiveautomation.com/t/easiest-way-to-keep-container-square-as-it-resizes/41776/4 "2021-01-02T12:46:49Z")

</div>

Could you tell me what the case shadow code you use to get those effect?

---

<div class="post-metadata">

**Author:** ![sungkhum](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/sungkhum/32/10636_2.png) [@sungkhum](https://forum.inductiveautomation.com/u/sungkhum)\
**Post date:** [January 2, 2021, 3:57pm UTC](https://forum.inductiveautomation.com/t/easiest-way-to-keep-container-square-as-it-resizes/41776/5 "2021-01-02T15:57:17Z")

</div>

Sure - here’s the Perspective style export: [neumorphism\_card.zip](https://forum.inductiveautomation.com/uploads/short-url/qHdwbXEJXPhTAgNaVJnq2lGoJpr.zip) (1.2 KB) It’s just a Neumorphism type style. Background is #f1f3f6