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. D…

Didn’t we have that already mark? <pre><span><style> div[id*='screenScrollView'] > div { max-width: 97%; }

I think this works - @PabloMFalero worked this out for me: <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

Thanks @Mark_Turrell I’ve just tried it but it doesn’t work :frowning: 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 ?

Hello, I’ve just found the solution to enlarge the central planel to the full width of the screen : .cUzhcc { max-width: 97%; } Thanks @Mark_Turrell for your help

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

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

[image] 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.

Thanks @ThinhDinh for your expertise. I’ve just tried another way that works too : div[class*='sc-dkmKpi cUzhcc focused'] { max-width: 97%; } Do you think that this class name is more stable ?

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.

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!

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

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

Ask for Help

ThinhDinh January 27, 2023, 12:23am 16

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.

Topic		Replies	Views
Web app in full width? Ask for Help	5	856	June 22, 2023
Full width Desktop - Containers Ask for Help	29	1233	July 22, 2025
Looking for CSS magic - background for the tablet / desktop view? Ask for Help	34	1780	August 5, 2022
Maximizing screen width when working with tables on a laptop Ask for Help custom-css	1	67	July 11, 2024
Tab Container CSS - Full Screen Width Ask for Help	5	116	June 19, 2025

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

Related topics