Greetings fellow Webflowers!
After agonizing over creating a blog website where I have a number of sliders (using slider.js) that need to have images that always remain the same ratio and resize dynamically depending on VW/VH of the device - I have stumbled on a solution that seems to good to be true! (perhaps someone already knows this or has used it, but to me it was a revelation that makes a immeasurable positive impact on my workflow)
Essentially, I found and online calculator that will create a a custom media query where you can specify min/max size in px’s for the height/width of a div (or any other identifiable property) and then the min/max resolution for your devices (media query breakpoints) and it will provide you with a perfectly formatted media query that can be copy/pasted into your website. It can be used with an HTML embed to see the results immediately in the Webflow designer or you can add it to the custom code section of your page or website.
The calculator is used to create media queries for dynamic and fluid resizing of any font, but I found that it is also applicable to any property that needs to be dynamically sized.
In my demo I apply the calculated formulas to both the font-size and height / width properties and the elements resize dynamically depending on viewport size from 1920px to 240px.
The implementation could not be easier.
Step 1
write down the min/max values in PX for a property
for my demo example I wanted to have a 16:9 ratio div that sizes from max size 1120px wide x 630px tall to min size 160px wide X 90px tall. also the font-size for the heading needs to be resized dynamically between max size 100px min size 20px The dynamic resizing occurs between 1920px breakpoint and 240px px breakpoints
Step 2.
Go to this online calculator and input your min/max values from Step 1 ( range of value for properties and viewport size), use the correct selectors and properties for your elements (e.g .someDivName / font-size or height or width etc…)
Step 3
Copy the media query created, and paste it on your website, either in a HTML embed, or Custom Code sections using the <style> tags.
YOU ARE DONE - now your div/font resizes dynamically in the ranges that you have provided!
ENJOY!!!
Published Demo Link - ERROR
Webflow Read Only Link - ERROR
