Flex Grid: "maximum width" option . . .

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: "maximum width" option . . .

Post by Smee »

Problem is: It works "sometimes", but most of the time, the Flex Grid covers the page from left to right even though in the page properties, the page width is set to 1200.

The temporary build is located at https://ahgweb.com/demo4/home.html. Setting the maximum width to 1200 works on this page. The Flex Grid displays as only 1200 pixels wide.

The next page, with the same settings on the Flex Grid and Page Properties does not display properly.

I'm 100% sure that it is just me missing something, so any assistance will be greatly appreciated.
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Flex Grid: "maximum width" option . . .

Post by crispy68 »

The next page, with the same settings on the Flex Grid and Page Properties does not display properly.
What page are you referring to that doesn't work?
Smee
 
 
Posts: 110
Joined: Fri Mar 02, 2018 11:03 pm

Re: Flex Grid: "maximum width" option . . .

Post by Smee »

crispy68 wrote: Tue Dec 07, 2021 1:18 am
The next page, with the same settings on the Flex Grid and Page Properties does not display properly.
What page are you referring to that doesn't work?
The home page displays properly. The flex grid should display as being 1200 pixels wide -- regardless of the resolution the monitor displays . . . my displays are 1920 X 1080 . . . which is pretty much standard resolution these days.

The next page (catalog or any other page on the site) displays the flex grid as being the entire width of the screen. Why have a maximum width setting it it does not work? I'm sure it works, but not sure what I have missed in the setup of the site. The customer (and rightly so) says she does not like it when items stretch from the left edge to the right edge of her HD monitor.

When I originally built the site, I decided to do a layout without the flex grid because of this problem. Maintenance lately has been a nightmare as some items will locate to unexpected places in different breakpoints. (http://www.apiarybeekeepingsupplies.com)

My health is failing (3-6 months is all they give me to live) so I'm trying to help my daughter to take over when I'm gone. However, the funky appearance of items stretching from one end of the screen to the other may cause this customer to look elsewhere for her needs.

Therefore, help is needed.

Sample (home page and catalog page) is located at https://www.ahgweb.com/demo4/apiary_v17_sample.wbs
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Flex Grid: "maximum width" option . . .

Post by crispy68 »

When I view your demo (in original post), the home page, catalog and New Arrivals page look good to me. The other 3 pages (not including the FB link) fill the screen.

I looked at your project but it only seems to contain the home page and catalog page both of which work for me. Am I missing something here?

One small issue I do see is the breakpoints in your master page(s) should match the page breakpoints. Currently, your page breakpoints are: 1200, 768, 480, 320. However, your master page is: 1024, 768, 480, 320. The default needs to be 1200 in the masterpage.
Smee
 
 
Posts: 110
Joined: Fri Mar 02, 2018 11:03 pm

Re: Flex Grid: "maximum width" option . . .

Post by Smee »

crispy68 wrote: Tue Dec 07, 2021 3:42 am Am I missing something here?
Definitely missing the point. Most screens today are full hd (1920 X 1080) as are mine and the customer's. SHE wants a definite end to the left and right sides of the flex grid that do not correspond to the 1920 pixel width of the screen.

The flex grid should be 1200 pixels wide regardless of the resolution (pixel width) of the screen. Isn't that why you put a "Maximum Width" input in the flex grid . . . to make sure that the width of the flex grid displays at a total resolution of 1200 at all times?

Most of all, why does it work correctly on "Home Page", but not on "Download our Catalog" (or any other) page?
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Flex Grid: "maximum width" option . . .

Post by crispy68 »

The reason I asked is it works for me. I have a large screen and both pages are 1200px wide. The wbs project file you supplied does not contain the pages you are having issues with. Your home page and catalog page look correct.
Smee
 
 
Posts: 110
Joined: Fri Mar 02, 2018 11:03 pm

Re: Flex Grid: "maximum width" option . . .

Post by Smee »

I found a "work around".

Place a "Layout Grid" and make it a single cell. Next, set the width of the layout grid to 1200 (it actually "works as advertised") and then place my flex grid inside of the layout grid. Now, all pages display as intended.

Thanks for your assistance.
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Flex Grid: "maximum width" option . . .

Post by crispy68 »

I would not suggest putting a flex grid inside a layout grid. This will over complicate things. A flex grid will work if you set the minimum width to 1200.

Here is your catalog page from the file you supplied:

Image

And your homepage:

Image

As you can see, it does work. If you are having issues with the other pages, please supply the project file that contains the pages you are having issues with so I can see your settings.
Smee
 
 
Posts: 110
Joined: Fri Mar 02, 2018 11:03 pm

Re: Flex Grid: "maximum width" option . . .

Post by Smee »

two images. An image that shows the problem is https://www.ahgweb.com/demo4/incorrect.png

An image that shows the correctly displayed flex grid is https://www.ahgweb.com/demo4/correct.png

When you looked at the uploaded site, you should have noticed that the flex grid had a color and was laid over a background image as shown in these two pictures.

Of course, white on white or transparent on transparent would not show anything close to the uploaded pages on the site. I did link to those pages for reference.
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Flex Grid: "maximum width" option . . .

Post by crispy68 »

I thought you were referring to the content not the background color. Because on some of the other pages, the content is stretched all the way across and there was no mention of background color.

I can you see you are using an image to darken the background but you can accomplish this with just setting the background to black and then adjust the alpha setting for transparency. This is much better as it uses CSS (faster) and not an image.

If you set the background of the entire flexgrid to a color/image/etc. then it affects the entire flex grid which is what you are seeing. If you just want the dark background behind the content, then open the flexgrid, and click on each of the cells in the grid, select style and set your background there.
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Flex Grid: "maximum width" option . . .

Post by crispy68 »

Here is your catalog page as I stated above. I set the background color to black with an alpha value of 200.

Image
Diogenes
 
 
Posts: 16
Joined: Thu Nov 25, 2021 7:16 pm

Re: Flex Grid: "maximum width" option . . .

Post by Diogenes »

Hello guys, I am struggling with max. width of layout grid if inside another layout grid. If I put jpeg there I can set up max width and it works in any breakpoints, but if there is layout grid within layout grid the inside grid is still full width if breakpoint applied. Even If set up fixed width. It worked in older versions, does not in latest. How can this be fixed? Thanks
Diogenes
 
 
Posts: 16
Joined: Thu Nov 25, 2021 7:16 pm

Re: Flex Grid: "maximum width" option . . .

Post by Diogenes »

Am I addressing wrong here? What would I do to get some answer?
User avatar
Pablo
 
Posts: 21574
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Flex Grid: "maximum width" option . . .

Post by Pablo »

To be able to help you, I need a DEMO project so I can see all your settings.

Note: I do not need the complete project because that will only take more time to figure out what you have done.
Basically, I just need a small project with one page and object(s) that are relevant to your question.

Please see this FAQ for further details:
viewtopic.php?f=10&t=82134
Diogenes
 
 
Posts: 16
Joined: Thu Nov 25, 2021 7:16 pm

Re: Flex Grid: "maximum width" option . . .

Post by Diogenes »

This helped me a lot Thanks.
Post Reply