# \[CSS Tricks\] Enlarge WebView Component on tablet/desktop mode

**URL:** <https://community.glideapps.com/t/css-tricks-enlarge-webview-component-on-tablet-desktop-mode/30029>\
**Category:** Ask for Help\
**Created:** [August 5, 2021, 8:28am UTC](https://community.glideapps.com/t/css-tricks-enlarge-webview-component-on-tablet-desktop-mode/30029 "2021-08-05T08:28:25Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![Fabien\_Vermot](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fabien_vermot/32/5955_2.png) [@Fabien\_Vermot](https://community.glideapps.com/u/Fabien_Vermot)\
**Post date:** [August 5, 2021, 8:28am UTC](https://community.glideapps.com/t/css-tricks-enlarge-webview-component-on-tablet-desktop-mode/30029/1 "2021-08-05T08:28:25Z")

</div>

Hello CSS Gliders!!

I used the tablet / desktop mode for one of my project but i want to use some CSS code to use the whole width of the screen and not only the center panel. I found to it for some components used in my screen (text, button) but i’ve missing the CSS trick for a webview component.

Do you have any idea to enlarge the webview component to the full width of the screen ?

Thanks for help

---

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [August 5, 2021, 8:31am UTC](https://community.glideapps.com/t/css-tricks-enlarge-webview-component-on-tablet-desktop-mode/30029/2 "2021-08-05T08:31:43Z")

</div>

I think this works - @PabloMFalero worked this out for me:

```auto
<pre><span><style>
div[id*='screenScrollView'] > div { 
max-width: 97%;
}

```

It is not quite perfect, with a little space on the right hand side in tablet mode, but it is fairly decent to use

---

<div class="post-metadata">

**Author:** ![Fabien\_Vermot](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fabien_vermot/32/5955_2.png) [@Fabien\_Vermot](https://community.glideapps.com/u/Fabien_Vermot)\
**Post date:** [August 5, 2021, 10:20am UTC](https://community.glideapps.com/t/css-tricks-enlarge-webview-component-on-tablet-desktop-mode/30029/3 "2021-08-05T10:20:07Z")

</div>

Thanks @Mark_Turrell  
I’ve just tried it but it doesn’t work ☹  
Is there a way to enlarge the central panel (and so all the components used) on the full width of the screen in the tablet mode ?

---

<div class="post-metadata">

**Author:** ![Fabien\_Vermot](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fabien_vermot/32/5955_2.png) [@Fabien\_Vermot](https://community.glideapps.com/u/Fabien_Vermot)\
**Post date:** [August 5, 2021, 4:58pm UTC](https://community.glideapps.com/t/css-tricks-enlarge-webview-component-on-tablet-desktop-mode/30029/4 "2021-08-05T16:58:17Z")

</div>

Hello,

I’ve just found the solution to enlarge the central planel to the full width of the screen :

```auto
.cUzhcc {
   max-width: 97%;
}

```

Thanks @Mark_Turrell for your help

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [August 5, 2021, 5:30pm UTC](https://community.glideapps.com/t/css-tricks-enlarge-webview-component-on-tablet-desktop-mode/30029/5 "2021-08-05T17:30:18Z")

</div>

check if this CSS will work on iOS and other systems… unless is for personal use.

---

<div class="post-metadata">

**Author:** ![Fabien\_Vermot](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fabien_vermot/32/5955_2.png) [@Fabien\_Vermot](https://community.glideapps.com/u/Fabien_Vermot)\
**Post date:** [August 5, 2021, 6:00pm UTC](https://community.glideapps.com/t/css-tricks-enlarge-webview-component-on-tablet-desktop-mode/30029/6 "2021-08-05T18:00:43Z")

</div>

Thanks @Uzo i will  
My client has planned to use the app only from desktop. I will check it out anyway on an iPad

---

<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:** [August 5, 2021, 11:28pm UTC](https://community.glideapps.com/t/css-tricks-enlarge-webview-component-on-tablet-desktop-mode/30029/7 "2021-08-05T23:28:06Z")

</div>

> [@Fabien\_Vermot](#):
>
> `.cUzhcc`

This is an unstable class name and will break pretty frequently. If you go ahead with this make sure you check your app everyday to see if it still works. Otherwise please try finding a more stable class name.

---

<div class="post-metadata">

**Author:** ![Fabien\_Vermot](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fabien_vermot/32/5955_2.png) [@Fabien\_Vermot](https://community.glideapps.com/u/Fabien_Vermot)\
**Post date:** [August 5, 2021, 11:50pm UTC](https://community.glideapps.com/t/css-tricks-enlarge-webview-component-on-tablet-desktop-mode/30029/8 "2021-08-05T23:50:00Z")

</div>

Thanks @ThinhDinh for your expertise.  
I’ve just tried another way that works too :

```auto
div[class*='sc-dkmKpi cUzhcc focused'] {
   max-width: 97%;
}

```

Do you think that this class name is more stable ?

---

<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:** [August 5, 2021, 11:59pm UTC](https://community.glideapps.com/t/css-tricks-enlarge-webview-component-on-tablet-desktop-mode/30029/9 "2021-08-05T23:59:54Z")

</div>

That sc-dkmKpi cUzhcc part is still unstable I believe. I think class\*= focused might target some other components on the screen so try moving up or down the code to find a more stable one.

---

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [August 30, 2021, 11:11am UTC](https://community.glideapps.com/t/css-tricks-enlarge-webview-component-on-tablet-desktop-mode/30029/10 "2021-08-30T11:11:21Z")

</div>

Did anyone figure out a stable class for the webview component? I’d like to use more of the screen with the webview, and maybe explore having a zoom too. Thanks!

---

<div class="post-metadata">

**Author:** ![PabloMFalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablomfalero/32/31166_2.png) [@PabloMFalero](https://community.glideapps.com/u/PabloMFalero)\
**Post date:** [August 30, 2021, 12:35pm UTC](https://community.glideapps.com/t/css-tricks-enlarge-webview-component-on-tablet-desktop-mode/30029/11 "2021-08-30T12:35:18Z")

</div>

Didn’t we have that already mark?

```auto
<pre><span><style>
div[id*='screenScrollView'] > div { 
max-width: 97%;
}

```

---

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [August 30, 2021, 3:54pm UTC](https://community.glideapps.com/t/css-tricks-enlarge-webview-component-on-tablet-desktop-mode/30029/12 "2021-08-30T15:54:23Z")

</div>

we do… to make it wider. I was trying to make it take the vertical part of the screen too 🙂

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [August 30, 2021, 6:17pm UTC](https://community.glideapps.com/t/css-tricks-enlarge-webview-component-on-tablet-desktop-mode/30029/13 "2021-08-30T18:17:56Z")

</div>

To be wider, try increasing the %.

For vertical part, try adding `max-height: 100%;`

---

<div class="post-metadata">

**Author:** ![BlakeWS](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/blakews/32/24377_2.png) [@BlakeWS](https://community.glideapps.com/u/BlakeWS)\
**Post date:** [August 30, 2021, 8:07pm UTC](https://community.glideapps.com/t/css-tricks-enlarge-webview-component-on-tablet-desktop-mode/30029/14 "2021-08-30T20:07:51Z")

</div>

Even if it’s not the full width, can the left and right margins be accessed to center the webview?  
Such as adding margin-left: auto & margin-right:auto to that same CSS bit, or something like this? (My CSS skills are very basic.)

I’d like this on the phone view where I’m trying to bring in charts from a Google Sheet, but the charts are always left-aligned.

---

<div class="post-metadata">

**Author:** ![CatapultDave](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/catapultdave/32/53132_2.png) [@CatapultDave](https://community.glideapps.com/u/CatapultDave)\
**Post date:** [January 26, 2023, 4:07pm UTC](https://community.glideapps.com/t/css-tricks-enlarge-webview-component-on-tablet-desktop-mode/30029/15 "2023-01-26T16:07:49Z")

</div>

Hello, I’m trying to make these changes to my App that will only be used on Web pages and not any mobile device. Where does this code need to go in order to work on the entire App?

---

<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:** [January 27, 2023, 12:23am UTC](https://community.glideapps.com/t/css-tricks-enlarge-webview-component-on-tablet-desktop-mode/30029/16 "2023-01-27T00:23:25Z")

</div>

Hope this can help, basically an Experimental Code column to retrieve the user’s device type (please beware that this might not always be reliable), and then use conditional visibility to show/hide elements accordingly.

> [@Dark/Light mode detection](https://community.glideapps.com/t/dark-light-mode-detection/32136):
>
> In some cases where I enable match device’s theme, I find some of my images/illustrations does not work that well on both dark & light mode. Therefore I created this column so I can cover both bases. Demo: Hope it helps some of your use cases, especially for designing.

---

<div class="post-metadata">

**Author:** ![NoCodeAndy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nocodeandy/32/62530_2.png) [@NoCodeAndy](https://community.glideapps.com/u/NoCodeAndy)\
**Post date:** [January 17, 2024, 4:49pm UTC](https://community.glideapps.com/t/css-tricks-enlarge-webview-component-on-tablet-desktop-mode/30029/17 "2024-01-17T16:49:11Z")

</div>