Managing content within a Page Size

[jPaul]

Hi Everybody,

Suppose I've prepared a Page size:
Page Width: 900
Page Height:1100
Then add a Layout Grid, or any other content

Everything appears properly on the WYSIWYG workspace, but if I preview in a browser, then the display will be 100%
of the browser window, (regardless of the display resolution).

How can I display the content to remain inside the page dimensions?

https://www.dropbox.com/scl/fi/q1go0ru3 ... 9keo&raw=1

[Pablo]

You can control the maximum width of the content via the 'maximum width' property of the layout grid.

This is demonstrated in almost all of the demo templates:
https://wysiwygwebbuilder.com/templates2025.html

[jPaul]

Thank you Pablo

That was a super quick reply, but I think I need to clarify for you.

I have attached this .jpg image to help you.
https://www.dropbox.com/scl/fi/6eti2gxc ... oru7&raw=1

All that brown pin-holed stuff is just empty space to try and account for different screen resolutions.

The important part of the plan is for a container box, page size specified in the properties as 1140x200 with a light brown background colour. All content such as Header, Menu, Footer, general content will need to be restricted inside this container box.

Will I be able to do this, and is there an example I can study?

[BaconFries]

From looking at the image it seems that you wish to centre the contents with all the required objects menu/text/images etc etc in a container and have it displayed within a background image. Note this isn't really the best way to design for mobile/modern browsers but if you really wish then the following may help:How do I center my page in the browser? There is also templates that show this but are Templates 2016/2017

[crispy68]

Couldn't you do this with grids or even flexgrid?

For example, create a layout grid that is 1x 10x 1x. Now set the max-width of this grid to -1140px (Adding the minus makes it so the background color is only this wide). If you want spacing above and below add top/bottom margin to the grid.

Inside this main grid, add your menu at the top and your Welcome text. Add another grid with 2 columns and drag it into the main grid (nested grids). Based on your pic, something like 4x 8x would do.