3 cell Layout Grid Not stacking at breakpoint or smaller

[Metalmaster]

I have a 3 equal cell layout grid with a different image in each cell, set to cover. Each cell has 3 nested layout grids all at same level which include a separate object in each nested layout grid of 2 with text and a theme button in the third. The site structure is index page and master page with header footer and content placeholder featured on master page. I am using WWB V15.

When I render the site and reduce the browser width to the breakpoint 480 or smaller width, the 3 layout grid cells do not stack on top of each other but stay in the same horizontal orientation, all the text is responsive but the height varies from left to right , with leftmost image having the smallest height, the next tallest the middle image and the right the tallest.

Can you give best advice how to correct this?

Paul

[crispy68]

Can you provide a test project file (.wbs) for us to look at? It's very hard to diagnose the problem simply based on your description.

[Metalmaster]

thanks for your quick reply, please give basic instructions to fulfill your request for test project file like how do I add such a file to this forum - sorry very new to this!

[Pablo]

Please see this related FAQ:
https://www.wysiwygwebbuilder.com/forum ... 10&t=82134

[Metalmaster]

Hello again

I have read the information supplied in the link, thank you. However when you say "Then upload your project (.wbs) to your website or another public server and include the link in your post." do you mean publish my site to a hosting service or do you mean up load the project file to a service like google drive for you to download and use in your WYSIWYG web builder software?

Paul

[Pablo]

or do you mean up load the project file to a service like google drive for you to download and use in your WYSIWYG web builder software?

Correct

[Metalmaster]

Hello Pablo & Chrispy68

Hope this link gives you what you need to assist me with this issue.

The website set up is the index and master pages only.

There are 2 issues on the index page, 1) the 3 cell layout grid preview issue at breakpoint 480 and 2) the video issue. For simplicity I only want to deal with the 3 cell issue here!

3 cell issue: Within the software everything appears fine even at the breakpoint 480, the 3 cells stack vertically, however preview the site in a Chrome browser and the 3 cell layout grid doesn't stack vertically at the breakpoint as expected, it stays horizontal throughout, WHY?

Link below I hope gives you the files you requested.

https://drive.google.com/drive/folders/ ... sp=sharing

Paul

[Pablo]

Firstly, why did you use the nested layout grids? Why do you need the outer grid?
It looks like you are making it more difficult than it needs to be.

- The page alignment should not be set to 'center in browser' because this adds an extra (fixed) container.
Related tutorial: http://www.wysiwygwebbuilder.com/layoutgrid_part1.html

- The master frame does not have the same breakpoints as the content page, so this will cause a conflict in the structure of the page.
See the FAQ "Can I use breakpoints in master pages and master frames?" -> https://www.wysiwygwebbuilder.com/forum ... 10&t=63817

- The master frame uses a fixed content place holder, this conflicts with the flexible behavior of the layout grids.
Please see "How to use Master Frames with Layout grids?" in this tutorial: http://www.wysiwygwebbuilder.com/master_frame.html

There may be other issues but you will need to fix these first.

[Metalmaster]

Thank you, I will study and implement your suggested changes and try to understand, at a basic level the set up rules for objects to work together.

I will report back once I have mastered this, thanks again.

Paul

[Metalmaster]

Firstly, why did you use the nested layout grids? Why do you need the outer grid?
It looks like you are making it more difficult than it needs to be.

- The page alignment should not be set to 'center in browser' because this adds an extra (fixed) container.
Related tutorial: http://www.wysiwygwebbuilder.com/layoutgrid_part1.html

- The master frame does not have the same breakpoints as the content page, so this will cause a conflict in the structure of the page.
See the FAQ "Can I use breakpoints in master pages and master frames?" -> https://www.wysiwygwebbuilder.com/forum ... 10&t=63817

- The master frame uses a fixed content place holder, this conflicts with the flexible behavior of the layout grids.
Please see "How to use Master Frames with Layout grids?" in this tutorial: http://www.wysiwygwebbuilder.com/master_frame.html

There may be other issues but you will need to fix these first.

Hello Pablo

Spent hours, still no joy! Removed all nested layout grids in each column and replaced them with text objects only, using margins for spacing. Also removed 480 managed breakpoints. The only breakpoints are all 480 and located in layout grid properties settings, except one which is the 900 bootstrap menu located in the master page.

Please would you be kind enough to check this site again the link is below. Thanks in advance - Paul

https://drive.google.com/drive/folders/ ... sp=sharing

[Pablo]

This looks better.
Now where extactly do I need to look to see the problem?

[Metalmaster]

OK, When I preview this small site of index and master page, the 3 column layout grid doesn't stack vertically when I reduce the screen size to 480 or smaller but stays horizontal and the columns just distort to adjust to the smaller screen width.

[Pablo]

Are you referring to 'LayoutGrid9'?
For me, this works correct.

[Metalmaster]

Yes I am referring to 'LayoutGrid9'?

I am please that everything look ok when you checked both software and browser previews.

When I preview in Chrome Browser, Layoutgrid9 doesn't stack at all at 480, however when I check this breakpoint within the software it is stacking correctly.

I am thinking that maybe it could it be my browser!

[Pablo]

The minimum size of Chrome browse is around 500 pixels, so this will not trigger the breakpoint.
In Chrome, use F12 to go into Developer mode and then use Ctrl+Shift+M to enable responsive view.

[Metalmaster]

Hi Pablo

out of my depth now, however followed your instructions and a mobile preview was displayed plus half screen html code.

Screenshot layoutgrid9 image called "capture.jpg" and you can see no change.

https://drive.google.com/file/d/1kb-Jog ... sp=sharing

[Pablo]

Did you enable responsive mode in the browser?

Note that this is unrelated to WWB. This is a browser issue.

[Metalmaster]

Hello Pablo

yes I put Chrome browser into development mode, same result images in 3 column did not stack!

Also I installed WWB on to a different computer and rebuilt the index and master page, also I reduced the 3 images to 150 dpi.

Still no joy, I am all out of ideas.

I also reduced columns to 2 and at breakpoint, still no joy.

I checked the breakpoint within WWB and everything stacks, as soon as I preview the images don't stack!

WHY

[Pablo]

Do you have an URL of the published page?

[Metalmaster]

I do not have a URL, all I have done is press F5 to preview in Chrome.

I host on Hostgator with a reseller account but do not know how to upload a site without a domain.

If this is possible I will investigate it.

How do I select a different default browser to Chrome in WWB settings.

Paul

[Pablo]

The default browser is a system setting.
But you can also configure different browser in WWB.

Related tutorial:
http://wysiwygwebbuilder.com/preview.html

[Metalmaster]

I have now previewed in Edge and IE browsers and both show the images stacked as expected, however there is a white gap which separates the top and bottom of the grid with it adjacent grids.

Pablo I think I going to have to give up on this mistry, I have spent over 7 days on this and I am no further on at resolving this issue then when I started.

I will create an identical copy of this responsive 2 page site but without grids and adjust the pages at each breakpoint and if this doesn't work, I will have to give up on the software altogether.

I will report my results here in a day or two.

[crispy68]

@metalmaster,
See the post on facebook I left you.

Your set up of the layout grid is not quite correct. I would also suggest adding a breakpoint to better control the grid when it goes to stacked mode.

I would also advise on not using blank text objects for spacing but use internal cell padding. Cleaner and less objects.

[Metalmaster]

Thank you for replying.

I have tried most combinations and your suggestion is nice and elegant I have created a similar site but found that all the text moved position when I preview at 480. However I will set up the page based on your suggestions to the letter. thanks again

[clarkep]

Metalmaster i have left you a reply to your post on Facebook with a video and suggesting you copy and paste from Coffee Time template that you can get from the wysiwyg web builder website copy and paste the card container and cards from their to your project then edit them with the images and text you want etc.

https://www.facebook.com/groups/960603263987725/

[Metalmaster]

Hello Peter

Thanks for your wonderful video effort - appreciated. Watched the video regarding cards and liked the idea, however I have created cards before and my client rejected them and insists they want a copy of their website from WIX, how hard can that be, 7 days later I am still on the first page, pulling my hair out.

I think there is something broken with my browser or windows 10