How to get proportional scaling effect?

Hi,

I have been trying to achieve an effect where below a certain viewport width, everything scales proportionately, like an image does. See how this website does it:

scaling-effect-all

This makes it easier when making responsive design and dealing with small screen sizes, below a certain resolution everything can simply scale proportionately, no more messing around endlessly with each element.

I also would like for certain elements, badges and boxes, to simply scale down when they do not fit anymore in the width. I see on other websites that this is possible, but how to do it in Divhunt?

I tried to acheive this effect by setting a min-width on the body to my desired smallest resolution, and it looked like it worked great for months, but for some reason that I have not been able to understand, it stopped working well. Now when I load my page that has a min-width set on the body in a mobile device, the screen looks zoomed in, and I need to zoom out to see the entire page.

Page loads like this, ‘zoomed in’ and cut off:

Page should look like this instead, not zoomed in, just normal:

Googling for a solution as to why the page loads ‘zoomed in’, I see people talking about viewport meta tag, but as far as I can see this is not something we are able to edit in Divhunt.

I have also tried using this method to achieve proportionate scaling:

But I think this method requires a fixed height as well, I was not able to get the desired result, but maybe I am missing something.

In any case, I am looking for any way to get the result I have shown using Divhunt, so that the entire page (or specific elements) scale down proportionately when they do not fit anymore in the width.

Can anyone from the Divhunt team tell me how this is done?

You should use %, vw, vh etc. units to this. But divhunt had some Bug with those. Not sure if it fixed yet.

1 Like

Hey @nextlevelbros, there’s one really cool method to achieve very fluid scaling by setting the global body font size to 1vw and then using EM units for everything in the build, but as @petrbilek said, Divhunt builder has certain issues with displaying correct sizes while using EM units, so it’s probably not the best thing to build right now. :sweat_smile:

After we fix those issues, I can create a complete walkthrough for the mentioned process. It’s a bit “complex” at first, but once you get the calculations, it will be easier. :slight_smile:

1 Like

@petrbilek @Lazarevic thanks guys for the response, I will definitley be looking forward to when we can use this method and yeah would love to see a walkthrough tutorial for this process :+1: