FlexGrid not so WYSIWYG (scrambled)

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
Kees1958
 
 
Posts: 21
Joined: Wed Jun 01, 2016 5:41 am

FlexGrid not so WYSIWYG (scrambled)

Post by Kees1958 » Sat Jun 02, 2018 11:53 am

Hi,

I must be doing something wrong, but cam't figure out what. I copied the flexgrid (at least as far I am aware of) settings of the windows settings templat. On the editor it looks okay, but in browser it is al scrambled up.

Download: https://we.tl/QQBcIfW4sq

User avatar
Pablo
 
Posts: 14529
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: FlexGrid not so WYSIWYG (scrambled)

Post by Pablo » Sat Jun 02, 2018 12:33 pm

Are you using a modern browser?
What do I need to do to see the problem?

Kees1958
 
 
Posts: 21
Joined: Wed Jun 01, 2016 5:41 am

Re: FlexGrid not so WYSIWYG (scrambled)

Post by Kees1958 » Sat Jun 02, 2018 5:51 pm

Just do a preview or publish. I am using latest Chrome and Firefox

This is screenprint (previous post has the project)

https://we.tl/93VBxmjLD6

User avatar
Pablo
 
Posts: 14529
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: FlexGrid not so WYSIWYG (scrambled)

Post by Pablo » Sat Jun 02, 2018 8:45 pm

The project you have shared does not contain the page from your screenshot.
But my guess is that there is a naming error in the grid items.

See also:
https://www.wysiwygwebbuilder.com/forum ... 10&t=64868

Kees1958
 
 
Posts: 21
Joined: Wed Jun 01, 2016 5:41 am

Re: FlexGrid not so WYSIWYG (scrambled)

Post by Kees1958 » Sun Jun 03, 2018 1:47 pm

Sorry posted the wrong project (inclued the template works instead of my project workshop).

Trhough trail and error I found out that deleting columns before adding rows for breakpoints caueses this scrambled layout.

Workflow which results in perfect responsive grid os:
1. Add extra rows for smaller (tablet, phone) breakpoints first
2. Remove the field names from the colums after the breakpoint
3. Add the removed fieldnames again to the grid in the rows just added
4. Remove the columns (outside screen width for that breakpoint)

Based on the settings example I made a 12 cells responsive grid starting in default with 4 columns and 3 rows for desktop, 3 colums 4 rows for tablet, 2 colums 6 rows for recent smartphone sizes and 1 columns 12 rows for old small screen smartphones.

User avatar
Pablo
 
Posts: 14529
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: FlexGrid not so WYSIWYG (scrambled)

Post by Pablo » Sun Jun 03, 2018 2:56 pm

To be able to help you I need to see what you have done, but I suspect that there is an issue with names.
It is very important that the same are valid otherwise the browser will get confused.

Post Reply

Who is online

Users browsing this forum: No registered users and 4 guests