Designer different to Publish

Design help General
1

HI,
I have a design which looks fine in the designer but when I publish, everything is larger than it should be and looks out of proportion. I am using grid as I thought it would be easier.

I can see in the screenshots that it does look correct, however in reality it’s not.

https://ontrialuk.webflow.io/music

Appreciate any suggestions on how to improve this - how can I adjust the designer so it reflects what is published? -

Thanks
Pete

image
image1451×911 385 KB

image
image1915×969 589 KB

https://preview.webflow.com/preview/ontrialuk?utm_medium=preview_link&utm_source=designer&utm_content=ontrialuk&preview=9a65ee361b2c239db1d68fd1ffac11f8&pageId=5e21a2f52c49354a5c074e52&mode=preview

2

@PeteM the size of the container is set based on viewport width:

image

As you view your site on larger or smaller screens the content inside will adjust to the available space based on the width of the viewport. So when you preview your site in the designer the width is constricted by the Webflow editor windows.

You can see here the width of each of your grid cells is set to be fractions of the grid container:

image

So as the container gets wider the fractional widths of the cells grow with it. You could set a max-width on your container that changes at different viewport sizes, but I would probably recommend thinking about this slightly differently, one of the huge advantages of grid is how it adapts responsively to different screen sizes.

Check out this example that Webflow built that contains a max-width for larger screens, but also adapts nicely on smaller screen sizes: https://webflow.com/website/newspaper-grid

3

Thanks @Sam-g - that’s really useful - I don’t need anything complex - just the CD’s - Buy now buttons and the player at the bottom - or maybe I need to rethink the design and put the player at the top and then the CD’s etc at the bottom?

Anyway I’ve been working on this for over 2 years now - so a few more redesigns won’t make much difference.