# Aspect ratio relative to screen
## 👉 **The Tag**
The height of the container is calculated with the screen height, so they won't maintain the designed aspect ratio, but is useful when you want a container to be relative to the screen. (ex: container height is 100% of the screen in the design, it will appear 100% on any device screen).
**📍 Where to add the tag:** A second-level container
```
[aspectratio:screen]
```
.jpg?alt=media\&token=f098e92a-8411-4650-a6a5-64396bfb5a7a)
**How does it adjust your design to fit to any phone?**
Bravo renders components considering their dimensions in reference to the specific device dimensions. In other words, it uses percentages to adapt to each screen.
{% hint style="info" %}
If the design is not fitting the screen as intended, add a [splash screen](https://docs.bravostudio.app/bravo-tags/app-icon-and-splash-screen) in your Figma. The splash screen acts as a "default" size for Bravo to calculate the ratio of the other app pages.
{% endhint %}
## 🏷️ **How to add the tag**
1. Create your design on the default app page size.
2\. Add a container around the design.
3\. **Paste** the tag into the layer name of the **2nd-level container.**
4\. Import to Bravo Studio & preview on Bravo Vision 🚀 (If you imported the app before, you just need to press the button Update in Bravo Studio to see the changes).
## 💾 Example files
Duplicate the files below to see how to set it up!
{% embed url="" %}
