Website not centralising on my laptop browser

Design help General
1

Hi all,
this is probably a very rookie mistake, I only joined webflow a few days ago.

Essentially, I am making my site in 1280px, preview looks great. When I publish and look in my browser, everything is sticking to the left side and there is a lot of air/white space on the right side. I would like the page to adjust depending on what size screen it is being opened at. My current resolution on my laptop is 1710px.

Appreciate learning from you

Here is my site Read-Only: Webflow - Rennor

2

Hi there,

To test and adjust your design for different screen sizes, you can:

  • Click the preview icon in the Designer and drag the canvas edge to test different viewport widths
  • Set specific widths by clicking the canvas dimensions at the top of the Designer and entering your desired width (e.g., 2000 pixels)
  • Use breakpoints to create customized designs for different screen sizes - learn more about breakpoints here

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

3

Hey @izzy7,

  • You can set the ‘Code Embed’ element’s left and right margin to ‘auto’ under the Spacing settings in the Styling tab
  • And set max-width property of ‘Body’ and ‘Navbar Logo Left’ to be 100% instead of set px values, since the screens in between breakpoints like yours at 1710 px would have a lesser max-width defined in that case (thus leading to extra space on the right).

This should ideally center the elements across different screen sizes. Hope this helps.