Hi webflow team:
I have been designing in desktop. Now when I view the tablet and mobile version, the images are not responsive to adjust within the size and get cropped. The type below each image bleeds out. Both look fine in desktop version.
Any thoughts?
Best
Saaniya
if you’re using pixels and not percentages for image sizes, then it won’t be responsive.
For text however, you can add the new “VH” measurement in your project’s custom code area.
https://cdn.css-tricks.com/wp-content/uploads/2014/05/vw.gif
Thanks. I’ll try that and let you know.
@PixelGeek you’re going to love this, type your VH and VW anywhere in webflow and they’re taken into account (: I think @vlogic or @jdesign found that recently, I’m using it since.
WooHoo is right. That is an amazing thing. Cool stuff.
Another little bit I am loving that I never realized:
padding % is driven by width only which provides some cool proportional hooks for responsive. Opens a world of options. Give an element 0 height % and use padding to prop it open and it maintains scaling / aspect ratio for height that is entirely driven by width.
We need a fluid responsive thinking thread / repository in tips and tricks to share little bits of discovery, code snippets / simple clean sharable examples - seed discoveries for people to build on. It would help solve about 1/3 of the struggles most people post. Webflow is empowering and a tremendous way to learn, but breaking through the initial shrink wrap on fluid responsive requires some tenacity and time. I would love to collectively shorten that process. @vincent has done that for me a bunch of times, but as it grows it can be a hunt and more difficult to search and discover. If we used it as an announcement sticky thread for examples it would be clean and searchable.
Waiiiit up, I didn’t get everything you said. Why wouldn’t it be driven by width only? Can you please precise the example you give too?
Yep. Recently I grab a common problem and spend more time on the sandbox so there’s a clean explanation in the end where we can point to. Almost everything is in the video tutorials but I’m under the impression people hate watching tutorial videos (I kind of hate it too 
)
Sorry, that was epically confusing…
height 0
top padding % (say 56%)
the div now scales in height proportionally
I never realized that until I was researching a method to make a video maintain proportion.
But to do what? what can you put in the padding of a div? (I’m gonna feel stupid in 3… 2… 1…)
It may be very hacky or outdated, but was new to me. Kind of the CSS3 equiv of using gifs 
You use it to prop open a background image or video - essentially to create a proportional space in the pageflow.
If you want content to work without additional pain of the padding set the div to relative and create a child div with any content to fit that space in an absolute aligned to the relative parent. Float nested with a vertical auto center, etc.
I agree it is sounding a bit crazy and painful without an example. Can’t do that at the moment. Will try to soon.
OK maybe I just reached that point instead
Hehe, I tried the div % padding and height zero and it’s not magic here 
And to make me feel even way stupider than I did a second ago - it finally sinks in that you can set height with VW. And now I have come full circle from WOOHOO to DOH and back to WOOHOO. 
I am torn on this a bit, I like the huge sandbox because it forces you to work with classes that all sync and I ultimately want a huge library of component builds. But it gets complex to isolate and troubleshoot and keep clean. I wrecked some stuff by accident a while back, so I have started building tiny bits in isolation and am hoping to go back and build a similar sandbox. Daunting to me. Any advice is welcome on how to make it scale well and be useful to others.
In facte as long as you delete old stuff and clean unused classes, it keeps itself pretty clean.
I’ve just discovered this vw and vh stuff which opens up a load of possibilities, but is there a way to make them relative to the parent container size rather than the browser? I’m finding it impossible to find a relative size that works well. Is there something like max and min values that could be defined?
My site has a maximum width of 1170px but obviously the browser window can be way bigger than that which completely disrupts my typography. Ideally the type should resize as its parent container resizes, not before.
