Streaming live at 10am (PST)

Tutorial - Dynamic/Fully Responsive (fluidly resizing) Fixed Size Divs & Fonts

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 - http://tiny.cc/demopub

Webflow Read Only Link - http://tiny.cc/fluidsizing

2 Likes

thanks for sharing this @IVG.

Happy that someone is finding this helpful! I thought maybe I was just behind and everyone knew this already :slight_smile: