Hey everyone! I am a beginner with Webflow and am working my way through learning the various tools at my disposal with it. I am currently building a site for a school project for the movie Blade Runner 2049. I have a layout that I’ve been working on (will provide link) that I’m liking the look of on my desktop, but it has a really hard time scaling down at all. The position of the body text on the Cast & Crew page and on the Synopsis page starts overlapping the navigation menu on the right side, the background images on the Cast & Crew page start having trouble covering the entire page for some reason, and the entire thing just doesn’t looks nearly as good as the width of the window is scaled down. I am definitely new to structuring web pages to make sure they’re responsive, so any tips at all would be so helpful! Even for one of the issues I’m having! Have a look and let me know what you think. Thank you so much in advance to anyone who can help!
What I noticed is that you have a lot of fixed margins on your elements. For example the SYNOPSIS Section has a Container which has a padding of 300 something, also a position 87px from the left, then the elements inside have also margins that are really big or really far in minus.
That can work fine if you expect your users to always have the same size screen… but obviously they don’t.
Instead of that I would suggest using Flexbox layouts, they are easy to make responsive. Read more about that here A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks or Flexbox | Webflow University
For example the SYNOPSIS section again - keep the container where it is (actually I would suggest making your own container since the webflow one is very narrow, just make a new div, give it the class ‘container’, set a max-width, something like 1200px, then margin left and right Auto. change max-width according to breakpoint), remove the container paddings and positions, remove all the margins on the text elements inside, instead create a box inside that contains all the text elements and is maybe aligned to the right side of the container.
Another thing I noticed, don’t just give elements position:absolute if they don’t need it, it makes your life sooo difficult!
Otherwise… make all your font-sizes waay smaller for mobile and maybe add a dropdown menu for navigation on mobile? There’s no nice way you can fit the menu otherwise I think.
Also your desktop version would look really cool if the sections would snap into place while scrolling!
Thanks a lot for all of your feedback! You gave me a lot of suggestions to begin developing skills from!