Mobile Canvas too big, columns and images bleeding off

Design help Layout & Design
1

Hello,

I so hope someone can help me. I am a bit of a beginner but i have been updating a site that was built for me.

I have perfected the desktop view of one of the pages but my mobile view is giving me real headaches as there are images and columns which are bleeding out of the mobile canvas making it look like a desktop site on mobile. I have tried copying the styles from the homepage which is perfect but i still can’t get it to look better.

I have been thinking it could be one of 2 things;

  • Column sizes on mobile are stretched and i can’t seem to limit them to the mobile width
    or
  • its to do with the way that i am adding an image

If anyone could help it would be amazing!

https://preview.webflow.com/preview/dryft-dev-site?utm_medium=preview_link&utm_source=designer&utm_content=dryft-dev-site&preview=2f425eedc2502c7a3df7fcb5c09cfaab&pageId=5ed8133c1bec62010ade5521&itemId=5edb4d182b0296493cc7f768&mode=preview

2

Hi Lucy

I just had a quick look at the site, the reason a few things are bleeding off canvas on mobile is that their widths aren’t told to do anything otherwise. For example, “Section 4” has a max-width of 400px on mobile and no other width instructions, so when looking at it in the mobile view in webflow (which is 320px wide) the section exceeds it off the canvas. As an example you can amend this by changing the max-width to 320px to see the change.

But this won’t really fix it as the structure you’ve built (ie. the stuff in the Navigator) is gonna be hard to work with responsively and on-going. I’d recommend looking at a few videos on how to best structure sites to address this first before adapting the build across breakpoints. I’d start with this How To Structure Websites Efficiently With Webflow - YouTube , Ran has so many great vids on Webflow for beginners. Hope this helps! And lmk if any other questions.