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

Flex Grid refuses to center in page from breakpoints

Post by Smee » Tue Jan 01, 2019 7:48 pm

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: 4666
Joined: Thu Aug 16, 2007 7:32 pm

Re: Flex Grid refuses to center in page from breakpoints

Post by BaconFries » Tue Jan 01, 2019 8:44 pm

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

Re: Flex Grid refuses to center in page from breakpoints

Post by Smee » Tue Jan 01, 2019 11:13 pm

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: 584
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 » Wed Jan 02, 2019 2:25 am

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

Re: Flex Grid refuses to center in page from breakpoints

Post by Smee » Wed Jan 02, 2019 2:37 am

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: 584
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 » Wed Jan 02, 2019 4:49 am

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

Re: Flex Grid refuses to center in page from breakpoints

Post by Smee » Wed Jan 02, 2019 6:00 am

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: 17993
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Flex Grid refuses to center in page from breakpoints

Post by Pablo » Wed Jan 02, 2019 7:58 am

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

Re: Flex Grid refuses to center in page from breakpoints

Post by Smee » Wed Jan 02, 2019 1:38 pm

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: 17993
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Flex Grid refuses to center in page from breakpoints

Post by Pablo » 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.

User avatar
crispy68
 
 
Posts: 584
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 » Wed Jan 02, 2019 7:36 pm

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.

Post Reply