Flex Grid refuses to center in page from breakpoints

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
Smee
 
 
Posts: 110
Joined: Fri Mar 02, 2018 11:03 pm

Flex Grid refuses to center in page from breakpoints

Post by Smee »

Not finding an answer after searching the forums, I'll have to bother you again --- probably for something so simple I can't see it.

Site here (and in very early development): http://www.ahgweb.com/qlitedemo

In developer mode (as it would be with my cell phone) flex grid hard aligns left side of the page. Since my phone is about 420 pixels wide in portrait mode, this is a problem --- as it will be with anyone else who visits and has a resolution wider than 320 pixels or 480 pixels.

Not sure why this is happening but would appreciate a point in the right direction to solve the problem.

This is a screen shot in Firefox developer's mode.

Image
User avatar
BaconFries
 
 
Posts: 5327
Joined: Thu Aug 16, 2007 7:32 pm

Re: Flex Grid refuses to center in page from breakpoints

Post by BaconFries »

I can't view the url as it is invalid and doesn't lead to the correct page/site you wish us to view it throws a 404 error.
Smee
 
 
Posts: 110
Joined: Fri Mar 02, 2018 11:03 pm

Re: Flex Grid refuses to center in page from breakpoints

Post by Smee »

My bad. Mistyped path to the old WP version. This is the correct one:

http://www.ahgweb.com/qlite

I used to have a WP version of the site at that address.
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Flex Grid refuses to center in page from breakpoints

Post by crispy68 »

It's very hard to say without seeing your project file.

How are the columns defined for your flexgrid in each BP? Is it possible you have the page set to centered? I believe floating layouts should not have page centering on.
Smee
 
 
Posts: 110
Joined: Fri Mar 02, 2018 11:03 pm

Re: Flex Grid refuses to center in page from breakpoints

Post by Smee »

Page centered, page not centered. Makes absolutely no difference whatsoever (in this file).

WBS file link attached.

http://www.ahgweb.com/qlite/qlite_02_2018.wbs
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Flex Grid refuses to center in page from breakpoints

Post by crispy68 »

The problem is you are using fixed widths on your columns rather than fr or %.

If you want things to fill the spaces, you cant use fixed width objects.

Your default BP is 980. Once the browser hits 979 it will show your 768 BP. Your columns are fixed widths adding up to 768px. So if the window width is 979, the first 768px is your columns and the other 211px is blank space. This is why it looks like everything is to the left.

You will need to set your columns to percentages or fr's so that they will fill the space width wise.

I noticed your 2nd column on the 768 BP is 10px for spacing. Why not use column gap for this? I would move your 3rd column to the 2nd column and make it only total of 2 columns. I would make the 1st column a width of 30% and the 2nd a width of 70%.

On your 480 BP, you have fixed widths again. Make each column 50%. On the 320, make your column 100%.
Smee
 
 
Posts: 110
Joined: Fri Mar 02, 2018 11:03 pm

Re: Flex Grid refuses to center in page from breakpoints

Post by Smee »

I understand what you are saying, but I don't want to fill the width of the page with the flex grid.

I want the flex grid to be 480 pixels wide on the 480 breakpoint. It also needs to be centered. If someone visits with a phone that has a 640 pixel page width, I don't want the flex grid to fill the page width below the header. I want it to be as wide as the header and no more.

The customer wants site to look as the current one does, but also wants it to be mobile friendly, while retaining the original appearance as much as possible. The original site for the radio station is http://www.qliteradio.com

While I desire the breakpoints to be centered, they cannot be fluid. In each breakpoint, the flex grid must be the width of the breakpoint only.

Not sure if that makes sense to others, but without being able to do that the customer says he will keep the old site despite its not being mobile friendly.
User avatar
Pablo
 
Posts: 21575
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Flex Grid refuses to center in page from breakpoints

Post by Pablo »

By design, flexbox is flexible not fixed. If you want fixed sizes then do not use flex-box/layout grid, but absolute mode with breakpoints instead.

Related tutorial:
http://www.wysiwygwebbuilder.com/layout_modes.html
Smee
 
 
Posts: 110
Joined: Fri Mar 02, 2018 11:03 pm

Re: Flex Grid refuses to center in page from breakpoints

Post by Smee »

That is exactly what I'm trying to do. However, when the page displays on a device that is wider than 320 px but not quite 480 px the flex grid is left aligned.

The header which is on a master page is also inside of a flex grid, but it aligns correctly.
User avatar
Pablo
 
Posts: 21575
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Flex Grid refuses to center in page from breakpoints

Post by Pablo »

As mentioned by crispy68, the columns are fixed and the content inside the flex grid is fixed (not flexible). This defeats the whole purpose of 'flex' grids.
The 'max-width' can be used to center the flex grid's container, however this only applies to the default view. In breakpoints, the container is always full width.

My suggestion is that if you want to implement a fixed layout then do not use flex grids or layout grid. You only make it yourself more difficult and the tools were not design to be used this way.
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Flex Grid refuses to center in page from breakpoints

Post by crispy68 »

The answer is simple: use a floating layer.

This will allow you to achieve what you want and still play nicely with your header.

In each breakpoint, position the objects to fit the exact width of that BP. Make sure to set the floating layer to center alignment.
User avatar
dnlyko
 
 
Posts: 134
Joined: Tue Mar 05, 2019 12:55 pm
Location: Toronto - Canada

Re: Flex Grid refuses to center in page from breakpoints

Post by dnlyko »

Pablo wrote: Wed Jan 02, 2019 2:42 pm As mentioned by crispy68, the columns are fixed and the content inside the flex grid is fixed (not flexible). This defeats the whole purpose of 'flex' grids.
The 'max-width' can be used to center the flex grid's container, however this only applies to the default view. In breakpoints, the container is always full width.

My suggestion is that if you want to implement a fixed layout then do not use flex grids or layout grid. You only make it yourself more difficult and the tools were not design to be used this way.
Is there a FixedGrid tool?
I am trying to rebuild matrixsupply.ca in WB (originally built in Adobe Muse)
User avatar
Pablo
 
Posts: 21575
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Flex Grid refuses to center in page from breakpoints

Post by Pablo »

Elements have a fixed size and position by default, so there is no need for a grid in that case.

Related tutorial:
http://www.wysiwygwebbuilder.com/layout_modes.html
User avatar
dnlyko
 
 
Posts: 134
Joined: Tue Mar 05, 2019 12:55 pm
Location: Toronto - Canada

Re: Flex Grid refuses to center in page from breakpoints

Post by dnlyko »

Yes, thanks.
Would be nice to have a FixedGrid tool that one could just punch in the values and produce a different grid for each breakpoint, then fill the grid cells with content.
User avatar
Pablo
 
Posts: 21575
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Flex Grid refuses to center in page from breakpoints

Post by Pablo »

You can use a flexgrid with pixels values for this.
User avatar
dnlyko
 
 
Posts: 134
Joined: Tue Mar 05, 2019 12:55 pm
Location: Toronto - Canada

Re: Flex Grid refuses to center in page from breakpoints

Post by dnlyko »

Yes I did use it and works very well but I was unsuccessful in getting it to centre in the page
User avatar
Pablo
 
Posts: 21575
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Flex Grid refuses to center in page from breakpoints

Post by Pablo »

If you set a max-width then the flex-grid with automatically be centered.
User avatar
dnlyko
 
 
Posts: 134
Joined: Tue Mar 05, 2019 12:55 pm
Location: Toronto - Canada

Re: Flex Grid refuses to center in page from breakpoints

Post by dnlyko »

Perfect !!! Thank You
Post Reply