Preview looks different then the edit Page

So basically when im the editor everything looks great. But when i preview, everything expands!

Editor:

Preview:

Anyone know a fix?

This is to do with your responsive settings. The editor is generally narrower than a full screen browser so, if you have your page set to be responsive, when viewed on a wider screen, the width of elements, and the space between them will expand to fill the screen.

Responsive design is a complex subject, there are plenty of tutorials you can find in this forum, on YouTube, and elsewhere.

But as a starting point, try grouping your elements into a single parent group, and apply a max width (or set to fixed width) to that group - that should stop them from expanding on a larger screen.

Or you can try having no max width on the individual elements - that should make them expand together, in relation to the screen size and one another, maintaining the same gap between them.

The best thing is to experiment with the minimum and maximum widths, and margins, in the responsive editor, and in a responsive inspector panel in a browser.

It can take a bit of trial and error to understand how it works, but eventually you’ll get the hang of it and be able to design your pages to behave exactly as you want them to on any screen size.

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.