Flex Grid refuses to center in page from breakpoints

[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.

[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]

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.

[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]

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

[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]

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.

[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]

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.

[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.

[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.

[dnlyko]

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)

[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

[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.

[Pablo]

You can use a flexgrid with pixels values for this.

[dnlyko]

Yes I did use it and works very well but I was unsuccessful in getting it to centre in the page

[Pablo]

If you set a max-width then the flex-grid with automatically be centered.

[dnlyko]

Perfect !!! Thank You