I’m new to Webflow and I’m sure my question here is very Web Design 101.
I’ve put together a website that has some nifty functionality, but unfortunately I’ve failed at the basics in regard to making something that scales well at different resolutions.
Because I have a lot of images that are overlapping each other, the majority of the content is using position:Absolute. My minimal understanding tells me that this isn’t an ideal setting if you want your website to scale well.
Right now it looks about how I want it on my 1920 x 1080 monitor. Any other resolution starts to fall apart.
Anyway, I was hoping one of you wizards might take a quick look at my site and let me know if anything obvious jumps out that would help improve things.
Note: I have not yet tried to go in and optimize it for Tablets on down. I intend to do this, but felt I should get the desktop version how I want it before worrying about the rest.
First of all, very impressive work with animations!
For fixing the issue with “scaling” to different screen sizes, I think you will have to change parameters in the interactions from px to vw or %. In this way, when the browser will be smaller, objects will move on smaller distance.
Thank you Sabanna! I was happy with what I was able to put together in a relatively short time with Webflow.
Your suggestion about percentage makes sense, I will try to transfer as much as I can from px to percentage. But what about the scale of all the components? Is the trade off for using objects with Absolute position that they will not scale with the size of the screen? I was hoping there was a way around this.
If absolute positioned object size depends on size of its parent or (relative positioned "grandparents) then it will scale with parent scaling down.
It is all about dependency.
