Maximum Page Width

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
Bucky108
 
 
Posts: 122
Joined: Mon Apr 20, 2020 8:15 pm

Maximum Page Width

Post by Bucky108 »

Is it possible to have a responsive page with a maximum width specified, other than using a Flex Grid??
Last edited by Bucky108 on Sat Jan 22, 2022 4:45 pm, edited 1 time in total.
User avatar
crispy68
 
 
Posts: 2729
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Maximum Page Width

Post by crispy68 »

You can set a maximum width in a layout grid or flex container. In a floating layer with the alignment set to center will keep objects within the page boundaries you set.
Bucky108
 
 
Posts: 122
Joined: Mon Apr 20, 2020 8:15 pm

Re: Maximum Page Width

Post by Bucky108 »

OK but there's no direct way to do it right?

It would be a nice option to have in Page properties.
User avatar
crispy68
 
 
Posts: 2729
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Maximum Page Width

Post by crispy68 »

So here is how you have to think about it.

In page properties, you set the page width. This width is indicated in the workspace between 0 and the blue dotted line on the right. This is where you should place your objects. If you simply place objects onto the workspace and use breakpoints (and don't use any floating layouts which includes grids, flex container, flex grid, etc) then you are creating a fixed, adaptive website. In each breakpoint, you simply adjust the layout by moving the objects and keeping them within the page width you set in page properties. If you set the page alignment in the page properties to center then all your objects will center in the browser. In this case all objects are within the page width you set. You will see blank space on the left and right depending on the browser size.

However, if you are wanting to create floating layouts (ie: responsive, flexible, fluid, etc) then you will be using grids, flex containers, flex grid and floating layers. You will need to set the page alignment to 'do not center'. Flexible design always fills the entire browser. That's the whole point of it. However in floating design, the page width does not keep objects within the page width you set. The grids, flex container and Flexgrid control the layout. So in floating design, you will need to specify a max-width for your layout which is done by specifying this in the layout grid, flex container and flex grid.
Bucky108
 
 
Posts: 122
Joined: Mon Apr 20, 2020 8:15 pm

Re: Maximum Page Width

Post by Bucky108 »

Got it..thank you.
Post Reply