Dynamic Zoom Layout

Design help General
1

The title might not best represent the question but I was wondering if it was possible to have my sites content zoom depending on the device width.

Currently on larger devices there is a lot of white space each side of my content, simply zooming the whole page makes everything look really nice.

Here is my site Read-Only: Webflow - Urban Podcasts

Thanks!

2

Hi Arran, it’s indeed possible to adjust the zoom level of your Webflow site’s content based on the device width. This can be achieved by using CSS media queries and the zoom property.

Here’s a basic example of how you can do this:

/* Default zoom level for larger devices */
body {
    zoom: 1.0;
}

/* Adjust zoom level for medium devices */
@media only screen and (max-width: 1200px) {
    body {
        zoom: 0.9;
    }
}

/* Adjust zoom level for smaller devices */
@media only screen and (max-width: 800px) {
    body {
        zoom: 0.8;
    }
}

In this example, the zoom level of the entire body of the website is adjusted based on the width of the device’s viewport. The max-width value in each media query should be adjusted based on the specific breakpoints of your website’s design.

Please note that the zoom property is not officially part of the CSS specification and is not supported in Firefox. For better cross-browser compatibility, you might want to consider using transform: scale() instead, although this can be more complex to implement as it can affect the layout of your page.

You can add this CSS to your Webflow project by going to your project settings, then custom code, and adding this inside a <style> tag in the Head Code section.