Padding in FlexGrid cells in different breakpoints

[han]

Dear Pablo,
I made hobby website caboverde.cz as FlexGrid in Content Place Holder and inserted into this FlexGrid another FlexGrid through Embedded page. Working great, thanks.
Minor problems, probably my faults.

1. It seems in FlexGrid, that if for Default BreakPoint is cell padding e.g.: 0px 0px 0px 20px and for BP 359px is e.g.: 0px 0px 0px 0px, then in WWB it is shown correct (BP_WWB.png), but in reality BP 359px has no padding defined and inherited padding in browser is 0px 0px 0px 20px (BP_Browser.png). I solved is with padding for BP 359px 0px 0px 0px 1px.

2. Embedded page with flexgrid is shown correctly in BP Default and 719px (BP719.png), but in BP320 sometimes seems strange (BP320a.png). But working, just aesthetic problem.

3. In FlexGrid is possible to use some Templates. Is it possible to define user Templates? Optimally with BP definitions included...

I will be happy for any ideas. Hanus

[Pablo]

The flex grid was not designed to be used with an embedded page, because an embedded page is a fixed layer. So, this conflicts with the flexible behavior of the grid.
Also, it's not common to use nested flex grids, it's better to design the layout in one grid.

Is it possible to define user Templates?

This feature is planned for next version

[han]

Thank you for answer. But it seems working very well and by nesting grids I can reuse grids multiple times as building blocks. Anyway what about cells padding in different BP (there was nothing nested)? What I do wrong? Thanks

[Pablo]

Can you please share a demo project so I can see all your settings?

Related FAQ:
http://www.wysiwygwebbuilder.com/forum/ ... 10&t=82134

[han]

I extracted reusable building block as standalone project and I made problems more visible in BP 359px right up and left down. I understand, that you do not agree with using flexgrid in embedded pages as reusable blocks, but do you see any problem with it in website caboverde.cz? Sorry for unqualified questions, but I am not professional, I just play with your program. Thanks
caboverde.cz/wwb/!CV_grid_55qqq.zip

[crispy68]

The first issue I see is that your breakpoints are all messed up. The default view should always be the largest and the page width is only 563px. You have a BP that is 719px but the page width is only 282px. Your 359px BP is only 319px wide and the 320px BP is 290px wide. None of this makes any sense.

To be honest, i've looked at the padding you have in both BP's and to me its a bit of a mess. My first suggestion is to correct all the layouts first starting with the default being the largest and it getting smaller as you go to the right. You dont need a 359px bp and a 320px bp. Also, outside of the 320px bp, your page widths are odd. Why did you choose 563px, 282px, 319px and 290px wide pages?

If you can tell me what kind of padding you are wanting around the image and text in each bp, I can work up a demo.

[han]

Thank you for your opinion and your offer. "Why did you choose 563px, 282px, 319px and 290px wide pages?" It is easy, because it is working perfectly as reusable Embedded Pages with BP 320, 359, 719 and Default (1280) in website caboverde.cz. In fact I have no problem at all, I am very happy with wwb 14. I just wanted to share my experience, maybe suggest some future improvements.

[crispy68]

The reason why asked about the page sizes is that the BP's should be used when a layout 'breaks' in design and usually the bp's used are common device sizes. Most devices are not 282px wide and are much bigger. 563 is an odd size. I dont know of any phones or tablets that are this size so it doesnt usually make sense to use this as a BP. Your page size should match the BP size. So if you add a 480px BP your page should be 480px wide.

Unfortunately your demo is not set up correctly imho which may cause things to not work on certain devices.

[crispy68]

@han

I took your project and added another page (page1) and duplicated what you did. You can download the zip file here.

I tweaked it on how I would do it. If you have any questions on what I did, dont hesitate to ask.

[Pablo]

Firstly, crispy68 thank you for your help!

I agree with crispy68, the breakpoints are not correctly implemented.
- the default view should be the largest view
- the page width of the breakpoint should (in most cases) be the same as the breakpoint's max width.

[han]

It's probably my last post on the topic because I don't want to waste your time or my time. I give up.
1. I do not understand why we do not understand each other and how it is possible that you do not see the difference in the display in wwb and in the browser. Please compare. It is crispy68 demo!
In wwb 14:

In browser:

Even in the generated ccs padding (0,0,0,0) for 359px is missing. I used the crispy68 demo and the error is still there, I tried several browsers and devices. Please compare the images. Do I have some computer error?

2. I quote crispy68 "Unfortunately your demo is not set up correctly which may cause things not work on certain devices." My demo is not a website, it just demonstrates a display error. Website is caboverde.cz with correct BPs as you can see below or test in person. So far I have not found a device or emulator (supporting grid) in which it works badly and I will be very happy if you find me such a device.
BP Default (1280):

BP 719:

BP 359:

BP 320:


3. I like rules, but I hope it is not illegal to use wwb 14 contrary to the rules if the website works well.

Thank you so much for your work and your help.

[Pablo]

I understand your problem, but your implementation of breakpoints is not correct, so the results will not be reliable.
If you want my help then you will first need to fix the errors in your layout.

[han]

I am sorry, but what is wrong with crispy68 demo (not mine) and why it is not working good as well?

[crispy68]

to be clear, the pics you provided are not from my demo. The first page of the demo is your old page. I created a whole new page in your project called 'page1' and that is my demo. Please open the project and look at 'page1'.

[crispy68]

Also, in your design, this is how it looks in default view:



The reason for the gap by the text is because you added this gap there by adding 40px padding in that cell!

In your pic at 418 width, this is the page you see as your other 3 page widths are less than 418 so you see the default page. To remedy your problem, you need to fix the breakpoints and page sizes to match. Until you do this, your results will be mixed.

[han]

My bad, I did not notice your new page. But error is in your page as well, if I add padding (30,0,0,0) to Default BP (1280), then in BP 480 seems good in WWB (0,0,0,0,), but wrong in browser (30,0,0,0). Do not see it in your device in preview?

[massive64am3]

How did you put the text and pics into the flexgrid?
Did you use Flexcontainers.
How do you adjust the size of the rows and columns in the Flexgrid.
Note: I am stumped at even starting to build a web page at this point.

[crispy68]

go to the first page of this post and look at my 3rd post. There is a link to a demo project you can download and look at. Make sure to look at Page1 (ignore the 1st page and Page2 in the project). Maybe this will help you understand how it works.