Help! Mobile view is a mess - can someone help with page responsiveness?

Would LOVE some help on page responsiveness.
I’ve discovered some of my text is different from a laptop view to a monitor view… but more importantly, my mobile view is a complete mess… I have no idea where I have gone wrong or where to begin on what to fix…

Any advice is appreciated!

Here is my read only link:
https://preview.webflow.com/preview/craft-draft?utm_medium=preview_link&utm_source=dashboard&utm_content=craft-draft&preview=5b1618b07bb0bef4556757dd7a809a72&mode=preview

I’d be happy to take a peek, but I’m getting a 404 when I try and visit your read-only link.

Can you double check that it’s correct and you haven’t disabled the link in the Designer?

THANK YOU!! I may have copied it over incorrectly, apologies.

Hopefully this one works: https://preview.webflow.com/preview/craft-cafe-bistro?utm_medium=preview_link&utm_source=dashboard&utm_content=craft-cafe-bistro&preview=b8c98a034ccd78836792f2f48ff5b858&mode=preview

So I wish I could say there was an easy way to fix the issues you’re noticing on mobile but a lot of styles you’ve made on your base breakpoint are working against it breaking down somewhat naturally.

The use of very large margins should be avoided in most cases along with negative margins (which should really only be used to overlap content):

Instead of forcing your elements into place with these large static margin values, think about the underlying structure of your content, the main sections, and their internal containers. This will not only help with responsiveness, but also improve the accessibility of the site in general.

I’d strongly recommend going through some of the content in the Webflow University as it will help you better understand how to structure your elements. I’ve included a couple good places to start but there’s a treasure trove of great (free) lessons available that cover just about anything you’d want to know—not only in terms of the Webflow itself but also web design and development in general:

It may be a good exercise to go over some of the tutorials above and take a stab at the design on a fresh page or even starting with some of the Prebuilt Layouts and adjust their styling as needed. These get you totally responsive elements out of the box and can be used to illustrate how to layout and organize your content :+1:

1 Like

Gahh! Not what I wanted to hear but yes I am still playing around and getting used to webflow.
So this is SUPER useful, I really appreciate it.

Just while I have you, Do you know if it is possible for my site to ‘default’ to a desktop view instead of changing to the mobile view? I know that’s not ideal - but could be a quick fix for me in the meantime while I get my skills up to scratch.

Thank you once again!

Sorry I couldn’t have provided a more straightforward answer but I’m glad that I was able to help point you in the right direction!

Do you know if it is possible for my site to ‘default’ to a desktop view instead of changing to the mobile view?

Do you mean default so the end-user sees the desktop view when they’re viewing the site on a mobile device? If so I’m not sure that’s possible without the visitor choosing “Request desktop site” in their mobile browser settings.

You can always go into your smaller breakpoints and override some of the large margin styles that are being inherited from the base breakpoint, but ultimately you’ll want to adjust the base breakpoint so that it works better “out of the box” on mobile devices.

Thank you SO MUCH. Super helpful & I really appreciate it :slight_smile: