# CSS to make embed full width

**URL:** https://community.glideapps.com/t/css-to-make-embed-full-width/60199
**Category:** Ask for Help
**Created:** [April 6, 2023, 12:04am UTC](https://community.glideapps.com/t/css-to-make-embed-full-width/60199 "2023-04-06T00:04:40Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![Niamh\_Arthur](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/niamh_arthur/32/44599_2.png) [@Niamh\_Arthur](https://community.glideapps.com/u/Niamh_Arthur)
#### Post date: [April 6, 2023, 12:04am UTC](https://community.glideapps.com/t/css-to-make-embed-full-width/60199/1 "2023-04-06T00:04:40Z")

</div>

I’m embedding a Glide app within my app using the Web embed element. Is there any CSS that would allow the embedded app to be full screen instead of in that narrow section for content?

I understand the basics of CSS, but would need some pretty specific direction! Thanks.

---

<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: [April 6, 2023, 12:11am UTC](https://community.glideapps.com/t/css-to-make-embed-full-width/60199/2 "2023-04-06T00:11:23Z")

</div>

I assume you’re on a Business/Enterprising that allows embedding a Glide app within another Glide app?

---

<div class="post-metadata">

### Author: ![Niamh\_Arthur](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/niamh_arthur/32/44599_2.png) [@Niamh\_Arthur](https://community.glideapps.com/u/Niamh_Arthur)
#### Post date: [April 6, 2023, 12:47am UTC](https://community.glideapps.com/t/css-to-make-embed-full-width/60199/3 "2023-04-06T00:47:39Z")

</div>

Yes! I have it embedding correctly, I’d just like to make it full screen.

---

<div class="post-metadata">

### Author: ![Niamh\_Arthur](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/niamh_arthur/32/44599_2.png) [@Niamh\_Arthur](https://community.glideapps.com/u/Niamh_Arthur)
#### Post date: [April 6, 2023, 2:36pm UTC](https://community.glideapps.com/t/css-to-make-embed-full-width/60199/4 "2023-04-06T14:36:51Z")

</div>

Oops, I really meant to ask about making the embedded app full WIDTH (not screen). The app seems to go to the width of any glide content, and I’d like it to go full width.

I’d also like the height to match the screen so there aren’t TWO scroll bars (one within the embedded app and one on the larger app).

Thanks!

---

<div class="post-metadata">

### Author: ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)
#### Post date: [April 6, 2023, 6:18pm UTC](https://community.glideapps.com/t/css-to-make-embed-full-width/60199/5 "2023-04-06T18:18:23Z")

</div>

I dont have a business plan where I can experiment with embeded Glide Pages, but if you use any other website, I assume that is not full width as well?

Nevermind, I understand. The web embed component only shows part of the website and then if scrolling is enabled, it gives the scrollers. So you’re more looking for full height and width essentially.

From my experiment with a normal website (I used [https://resy.com](https://resy.com)), if viewing live, you’ll see the full page width wise without scrolling (Desktop will show Desktop version and Mobile will show mobile version. However, like any website, you’ll need to continue scrolling down to view all the content.

I found this HTML element that currently has overflow: hidden auto; I disabled that and it turned the vertical scroll bar off on the page my web embed is on

---

<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: [April 6, 2023, 11:43pm UTC](https://community.glideapps.com/t/css-to-make-embed-full-width/60199/6 "2023-04-06T23:43:09Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/a/1ab8a8d55171fb236be99c8544bbe46e6f622f5c.jpeg)

So you want to remove the vertical scroll bar and the padding on the left and right?

> [@Joe\_Gabriele](#):
>
> From my experiment with a normal website (I used [https://resy.com](https://resy.com)), if viewing live, you’ll see the full page width wise without scrolling (Desktop will show Desktop version and Mobile will show mobile version. However, like any website, you’ll need to continue scrolling down to view all the content.

I don’t think I have a better recommendation than this.

---

<div class="post-metadata">

### Author: ![Sebastian\_H](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sebastian_h/32/57533_2.png) [@Sebastian\_H](https://community.glideapps.com/u/Sebastian_H)
#### Post date: [May 31, 2023, 6:30pm UTC](https://community.glideapps.com/t/css-to-make-embed-full-width/60199/7 "2023-05-31T18:30:06Z")

</div>

I add my web-embedding into a container and then add a CSS class to it.

.wideEmbedded\>div\>div\>div\>div\>div\>div\>div{  
padding: 0px;  
}

This gets rid of the white border one either side of the embedding and uses the full width of the screen.

Hope it helps

---

<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: [May 31, 2023, 11:43pm UTC](https://community.glideapps.com/t/css-to-make-embed-full-width/60199/8 "2023-05-31T23:43:47Z")

</div>

I assume this is for the new Glide Apps, and on Business/Enterprise?
