How can I make it responsive? Problems with Desktop breakpoint (small screens)

Hi guys, how’s it going?

So, I’m finishing my project but I got one problem. The website is fine on desktop, but as soon as I start reducing the screen size, all elements are affected. If I manually edit the element on the smallest desktop breakpoint in order to make it responsible, it also affects the standard desktop breakpoint.

THIS IS THE REGULAR DESKTOP BREAKPOINT

THIS IS THE SMALLEST DESKTOP BREAKPOINT

THIS IS THE DESKTOP BREAKPOINT

How can I make it responsible? Can I enable the tablet view ealier?


Here is my site Read-Only: https://preview.webflow.com/preview/lojaroyalglass?utm_medium=preview_link&utm_source=dashboard&utm_content=lojaroyalglass&preview=b128d8921239c9c580a0c5e935d497a5&mode=preview]1
(how to share your site Read-Only link)

I guess, there is a way to override breakpoints. But you don’t have to.

You have a lot of space here for your phone number. Use it.
image

Even in your menu, you can use your space. And reduce the margin on right and left.

1 Like

But the problem is, when I make the ajustments in this specific break point, Webflow also applies it to other Desktop breakpoints (larger screens). I’m having issues only on small screen and I don’t know how to fix it =( .

1 Like

There is only one breakpoint for desktop.
But you can use max-width for e. g. instead of margins with “200” or “120”

1 Like

I think I’ll need to re-design the entire website. I wanted a centered layout, but instead of using container I chose 220px or margin for all elements. I think that’s my problem, because that’s is what it causing the bugs. What do you think?