I’m displaying the Okta embedded sign in widget on my application on a 4k monitor and everything is very small. I can customize the widget using the .css file successfully, but it’s a ton of work to touch every piece of text, input box and button on the widget just to make everything uniformly larger. Is there a way to make the entire widget display larger without touching each individual style?
Unfortunately, there isn’t an easy work around if your screen size is above 1080P / 1440p as CSS is still catching up to our samples and we base it on what is absolutely required and avoid stale code for frontend performance reasons see CSS node modules here…
Why?
All the embedded widgets ar designed sample for many Okta API use cases of features and UX and frameworks, where we have to show you examples of what each feature does and consume less browser resources, and mostly focuses on helping you get started and its production ready and it focuses on most widely used display resolutions which unfortunately < 2k displays, forget about 4k.
How do I do this effectively?
You need to assume screen width at certain points (viewports). There isn’t an easy way here; you may need to use media queries. Most challenges of optimizing for large-scale displays center around how to scale images and manage content. Since Okta’s content is usually only a simple login page, you don’t need to touch too many elements / modules, and every class only has certain elements that bother you.
What else can I do ?
We definitely value such inputs!
You can raise an issue here: Issues · okta/okta-signin-widget · GitHub. some of the comments, the developers might reach out with better ways to do this.
or you can raise an Okta Idea… Okta Help Center (Lightning)
1 Like
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.