Another "scale content to browser" topic

Feature Requests
#1

I have seen various posts about this same question, I even made one about using hype on 4k displays some couple years ago.

Now big resolution displays are everywhere and I my self own one, and I am starting to look for solutions.

I created this video explaining the whole situation I am facing:

In short:

One I found, and it actually works, is using CSS:

@media (min-width: 1900px) {
    body {
        zoom: 140%;
    }
}

This actually triggers the browser build-in zoom capabilities to increase the size of every element displayed in the browser, the problem is that it only seems to work on Chrome and Safari, so Firefox users are out of luck.

And the hype flexible layout seems to “brute force” its way with makes some content to fall outside the boundaries of the browser.

In my understanding is that Hype currently lacks any features that gets the same results as the CSS code I shared, but I am wondering if there is an alternative solution. I am unaware of or of something like this can be implemented in future Hype releases, for now I am adding this to feature requests.

#2

It seems that you are using the CSS to effectively act as breakpoints, which would be more of the domain in Hype’s Responsive Layouts.

However from watching the video, the approach I would take is to just split up the foreground and background elements. For the foreground, you can use a zoom contents + shrink to fit approach to keep them inside, and the background you can use a zoom contents + expand to fill.

Crafting a layout that expands exactly as wanted is not easy (nor is providing the right tools to do so - but all feedback helps factor in to improve Hype!). If CSS gets the job done how you want I’d say there’s nothing wrong with that approach :slight_smile:.

2 Likes