The form on this website https://iprotect.olympusmobile.co.za/ has a fixed width and is centered when the browser is maximized. Then when the browser is resorted down (window made smaller) it responds to the size as webflow would normally do. Now I really like the fact that this form stays a certain size and only responds when the window gets smaller.
Ant tips on how to execute this in webflow would be awesome?
Easy peasy.
Desktop:
give your body element height 100% (has no effect but is needed)
add a section and give it height 100%, it take up all the viewport whatever the browser size is
add a container and give it a name like .form-container. under typography, click on horizontal centering
place inside the container a div with your form inside it, give the div a name, and display inline-block, and a width and a height, of the size you want to form to be. it should be horizontally centered now.
now center the container (.form-container) vertically, give it position relative, then this exact 2 settings:
Note that it's % values for both.
Now it looks like your example. Click on the devices button, starting by the tablet one, and adjust sizes andstyles for each, as desired.
Easy for you hehe!
Thanks a million Vincent! The answer was fantastic and it opened up some new avenues of inspiration as I'm quite new to Webflow..
Thanks again
Oh sorry I meant "with Webflow, it's going to be easy", really (-: I'll say that from now on (-:
Try to remember the vertical centering method, it's a good one, my favorite, it's really good CSS that works all the time. The other thing to remember is tio have sectioons taking the whole height of the viewport, they have to be height 100% but the body ALSO have to be height 100%, as a prerequisite. Two important things for designing cool things with Webflow (-:
They say there are many ways to skin a cat but from your explanation and method is great and makes a lot of sense. Thanks again for your help and advice, it is greatly appreciated.
