After spending the day trying to figure out how to fix my content where I want it while trying to get it to resize to become responsive when changing device views i’ve decided to give in and ask for some help.
Attached is how I would like it to stay looking or there abouts when scaling, any advice would be greatly appreciated.
In short, you’ve given your elements a pixel width. If you’re categorically telling an element to be 800pixels, it’s going to be 800 pixels no matter what the screen size is. It’ll be like telling a 10 inch piece of wood to fit into an 8 inch hole, there’s going to be problems. )There’s a joke there somewhere)
This is where %'s and VW measurements can come in really useful. If you tell an element to be 60VW, this means it will be displayed at 60% of the viewport screen it is on (no matter what it’s size) so, 60% of an iPhone screen, or 60% of a 27" desktop. 60% is a relative measurement.
This can make things fit in proportion better thus creating a responsive site.
The layout you have on desktop, just isn’t going to work on mobile, so flex box can come in really useful. www.flexboxgame.com is a worthy investment of your time! (I’ve said this a lot this evening on the forum, but it really is!) Flexbox can really help you layout elements, then switch them around easily for different breakpoints. It’s a very powerful tool to learn.
Take a look at this article on the University too, to help you better understand responsiveness with Webflow…
