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:
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?