So I am working on this website design for a client, that has a bit of an unusual layout. Now I can get his layout pixel perfect on desktop, however the client doesn’t want this layout to be responsive. He just want everything to scale proportionally to the screen size. You know, like the good old days, before all this responsive design.
That being said, do you have any idea on how I would go about doing that? Cause I tried setting everything to relative positioning, but i don’t think that will work. Is there not a way to just pet everything on a container and have that container shrink and grow with the screen size (like the good old days(lol)).
Thanks for your quick reply. Yeah here is the link.
So would VW keep the spacing and size of the images the same relative to screen size? Cause essentially, I just like, need everything to be scaled and positioned like it is, if you view the site on desktop. Then once you view it on different screen sizes it just all scales down. I know it is odd, especially in today’s world of responsive design haha.
Actually you will be creating the responsive design in the end using relative units. I think you wanted to say “adaptive” which is a way to describe layout which changes on certain breakpoints to adapt to the new width. Responsive is just going to scale down and that’s exactly what you want.
Semantics aside just build this scene with percentages or vw’s/vh’s, no matter in your case. Then it will all scale nicely down. Obviously you will have to rebuild everything since now you are using pixels and those aren’t going to scale at all.
For all intents and purposes these two positioning settings behave mostly the same. If you meant to ask if you should use relative or absolute then it will depend on the structure that you will create for the graphical elements. Most likely you will need to set absolute positioning and then modify elements placements with percent units.
Hmmm, So I changed everything to absolute and made all the units percent. Yet, when i view it on a smaller screen, it seem all the pieces still don’t stay in the relative positions. Is there something I am missing here.
Hi bobbz
By ditching relative positioning and restructuring your layout a bit you can achieve close to what you want with just a few simple classes. See link below.
So I played around with you example, the only part that kind of breaks it is that, the button on my site (linked earlier in this thread) are positioned in a unusual way.
I mean, I’ve tried placing them in a container and positioning them with percentages and they still get all out of wack as i scale the screen size.
Like, the whole thing should behave exactly like this website. Space Jam Website. Like visit that on desk top, then on you mobile device. Is that even possible on webflow, or is there too much under the hood that just automatically makes it responsive"
Hi Bobby,
Sorry I couldn’t reply quicker but I’m just getting over a really bad case of the flu.
I’m not sure I can help you on this one, maybe Pixelgeek or one of the other webflow team could have a look. I mean the space jam website you linked to (created in 1996) doesn’t responsively scale anyway? Also viewing it on a mobile is a VERY BAD experience…not just because you have to zoom way into it see anything. I guess you need to weigh up what is more important, usability or how well the layout conforms to a flat design. It might just be simpler to create media query versions that would achieve a similar result.
