Scaling not working at all

Hello, I am new to webflow but need it to build a landing page for an app we are developing.
You can see it under:
https://preview.webflow.com/preview/habity2?utm_medium=preview_link&utm_source=designer&utm_content=habity2&preview=b0755da6fbf5292b48aae19e95037f3e&mode=preview
I designed it with a width of 320px and changing the width or viewing the site on different mobile phones doesn´t work at all.
I watched a few videos and tried using div blocks for different sections which made it slightly better, but I still don´t know how to fix the problem.

are you only caring about the mobile phone and not the way it looks on desktop?

I want to build a desktop version later on, but for now mobile is enough.

Well that is important because Styles actually cascade down from desktop to mobile. I will walk you through a few basics for fixing your mobile site it is actually easier to design it right from the start and then make it mobile responsive. Give me a few minutes and I’ll make a short video.

Hi Anton you might benefit from a webflow crash course there are a few on youtube or the very thorough Webflow university. But the easiest way to think about things as boxes. The boxes can be pout inside other boxes, stacked on top of each other. Some of the boxes can also be the same size and so they get named the same thing.

I went through that first section on your mobile phone size to show you what i mean. You should use positioning as a last resort but having everything absolutely positioned basically stopped the boxed from stacking and that is why everything overlapped. Hopefully this video helps.

1 Like

Wow, thanks a lot for this thorough explanation, seems like I have a lot to learn!
I will try to work through your advice over the weekend.

2 Likes