# Responsive to all screens

**URL:** <https://community.glideapps.com/t/responsive-to-all-screens/53109>\
**Category:** Ask for Help\
**Created:** [November 2, 2022, 10:21am UTC](https://community.glideapps.com/t/responsive-to-all-screens/53109 "2022-11-02T10:21:02Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sales\_Manager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sales_manager/32/16172_2.png) [@Sales\_Manager](https://community.glideapps.com/u/Sales_Manager)\
**Post date:** [November 2, 2022, 10:21am UTC](https://community.glideapps.com/t/responsive-to-all-screens/53109/1 "2022-11-02T10:21:02Z")

</div>

How do I make the app responsive to all screens?

Use this code

```auto
<pre><span><style>

/* Text Entry (1 nd component) */
div[id*='screenScrollView'] > div > :nth-child(18) {
margin-top:-20px;
margin-left:-5px;
width:50%;
height:150px;
}

/* Text Entry (1 nd component) */
div[id*='screenScrollView'] > div > :nth-child(19) {
margin-top:-150px;
margin-left:190px;
width:50%;
height:px;
}

/* Text Entry (1 nd component) */
div[id*='screenScrollView'] > div > :nth-child(20) {
margin-top:px;
margin-left:-5px;
width:50%;
height:170px;
}

/* Text Entry (1 nd component) */
div[id*='screenScrollView'] > div > :nth-child(21) {
margin-top:-170px;
margin-left:190px;
width:50%;
height:px;
}

</style></span></pre>

```

![SAR](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/2/9269e7c2890779cb66c8b721758c51fa7e39aec1.png)

 ![SAR1](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/c/ecf6b6acfbc2e1e46d52d44117b2c14e87cce39c.png)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [November 3, 2022, 12:59am UTC](https://community.glideapps.com/t/responsive-to-all-screens/53109/2 "2022-11-03T00:59:43Z")

</div>

You can use a responsive set up for this:

> **[Responsive Web Design Media Queries](https://www.w3schools.com/css/css_rwd_mediaqueries.asp)**
>
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

Basically set up multiple “if-then-else” scenarios based on the browser window size.

It’s not easy though, since you have to take into account a lot of device sizes, so make sure you get the right breaking points for desktop, tablet and mobile.

---

<div class="post-metadata">

**Author:** ![nathanaelb](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathanaelb/32/43079_2.png) [@nathanaelb](https://community.glideapps.com/u/nathanaelb)\
**Post date:** [November 3, 2022, 1:06am UTC](https://community.glideapps.com/t/responsive-to-all-screens/53109/3 "2022-11-03T01:06:10Z")

</div>

I assume Glide doesn’t cover all cases. But shouldn’t it? I feel like it shouldn’t be up to the dev team to keep up with responsiveness considerations and maintain their code.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [November 3, 2022, 1:09am UTC](https://community.glideapps.com/t/responsive-to-all-screens/53109/4 "2022-11-03T01:09:39Z")

</div>

Glide does cover it to a good extent, this is just a case of OP using CSS and it’s not responsive.