Aug 2017
4 / 4
Oct 2020
Oct 2020
DanjaVasiliev
Aug '17
1

Hi,

currently there is no built-in functionality in Hotglue to make your pages responsive.

One way to make Hotglue pages look better on smaller screens is to scale them.
You can include the following CSS fragment into your site's <head> section at http://yoursite.hotglue.me/code193:

<style>
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    body {
        transform: scale(3);
        transform-origin: 0 0;
    }
}

@media only screen and (min-device-width: 481px) and (max-device-width: 800px) {
    body {
        transform: scale(2);
        transform-origin: 0 0;
   }
}

@media only screen and (min-device-width: 801px) {
    body {
        transform: scale(1);
        transform-origin: 0 0;
    }
}
</style>

This CSS will scale the site 300% on phones (320-480px width), 200% on tablets (481-800px width), while using 100% (original) scaling on larger screens (adjust scale value and screen sizes as needed).

We are using this scaling method on http://hotglue.me314, have a look.

Hope this helps,
D

1 month later
rowan
Oct '17

Sorry for reacting late but super thanks , i will try this

2 years later
fnbraleigh
Oct '20
DanjaVasiliev

Is there a way to squish the sides towards the middle by keeping them empty?

Right now it only works for the right side, when that's empty it squishes left.

If my text is big enough, I won't have to scale everything and make people scroll in 2 dimensions.