Spacing and positioning breaking at different screen sizes

Design help Layout & Design
1

Hello!

I am in a very confused state right now.

ex2
ex21397×372 62.9 KB

ex1
ex11450×457 77.2 KB

Positioning is not consistent across screen sizes and I am new to webflow and not sure how to get this fixed without having to constantly adjust and hope it sticks

May I please have some guidance so that regardless of screen size within a breakpoint bracket the elements stay aligned an properly positioned?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi there,

Maintaining consistent element positioning across different screen sizes within breakpoints requires a combination of proper setup and testing. Using responsive design principles and relative sizing instead of fixed pixel values will help ensure your layout remains stable.

For best results:

  1. Use percentage (%), VW (viewport width), or VH (viewport height) units instead of pixels for better adaptability
  2. Test your design’s responsiveness in preview mode by resizing the canvas
  3. Use the Canvas settings option to preview specific screen sizes by entering custom pixel values
  4. Verify your layout by dragging the canvas edge to test various viewport widths within each breakpoint

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

Hi there! I checked your Read-Only link, great effort so far.

One key issue is that your build starts from the 1440px breakpoint, which makes scaling difficult. In Webflow, it’s best to structure your site starting from the base desktop breakpoint (around 1024px). From there, you can adjust for smaller and larger screens.

Also, the current layout structure makes responsiveness tricky. I’d recommend rebuilding from the base breakpoint using proper layout tools like Flexbox or Grid, which will keep your elements aligned across screen sizes.

Regarding the overflowing div block, where you’ve used relative positioning, set the left to 0, then scroll up to the spacing section and set margin: auto on both sides to center it properly.

image
image1920×1086 162 KB

If you’re open to learning, I’m happy to guide you step-by-step. it’ll make future builds way easier.

Let me know!