I was wondering if anyone could have a look at my site and help me out. It’s displaying fine for Desktop, Tablet and Mobile devices but I’m having some issues with it when resizing in desktop. My main issue is that when I resize down to a tablet and then mobile view in desktop the contact buttons I have create for these views are positioned randomly on the page and actually end up on top of each other.
Whilst on the respective device the site will look fine it would be great to have it moving smoothly when resized in a desktop browser. Does anyone have any advice?
Responsivity is when rules change when you pass a breakpoint. But in-between breakpoints, your site must behave well too. With fuild of fixed size elements. Webflow displays breakpoints at exact dimension but allows you to resize your designer view to address the span of each breakpoint. And doing so, we can easily reproduce your bug… and fix it (I’ll show you how to reproduce it and you’ll find a way to fix it )
You have to drag the edge of the viewport. Note how sometimes it tells you what device screen size you’ve reached:
What appears to be random, isn´t random at all. You´re contact buttons are aligned to the left. So when the browser gets wider, they keep the same distance to the left, instead of scaling or centering.
In addition, you´re buttons have a fixed with, so when the width of the browser isn´t wide enough to show them side by side, it will automatically position the second one under the first one. Kind of like when you´re typing and reaching the end, it will automatically start a new line.
Try using the flexbox option for this. Flexbox is a very powerful tool that gets rid of this kind of unwanted behavior, in a fast and easily understandable way.
)