Hi, I have a query with 20 entries. I am displaying 4 modules per row in desktop view. How would I show only 3 modules in tablet view? The query template has no options in tablet mode when I select the grid editor.
Thank you @anon32808828,
it seems I succumbed to some kind of field blindness there 
@Louis Maybe some blurred out values of the desktop values would prevent this terrible illness? 
1 Like
Yes. Some areas have place for improvements. They don’t naturally communicates to you that these can be edited. Communication should be natural as much as possible. Louis and team is doing good job but hope these minor kinks can be sorted out. This will also reduce the support requests if the UI naturally communicates you that something can be entered here. Tooltips or additional line of text also works.
1 Like
Thanks @anon32808828 for helping out.
Indeed @T-low, the layout editor could use a little rework to make it more user friendly.
Thanks for bringing it up.
2 Likes
Hi,
Sorry to jump in but I can’t get any responsive setting to work…
It’s really driving me mad, I must obviously be me missing something!
I have a query with 3 posts and set query template to auto grid:
No problem so far, the 3 items are displayed in 3 column grid on all breakpoints.
Now, I switch to middle breakpoint and set grid to 1fr:
But there is no change, backend or frontend 
If inspect the code, grid-template-columns is overriden but still “1fr 1fr 1fr”!
Exact same issue with non auto grid, but things differ.
grid-template-columns is OK:
But items have some span properties:
I might be dumb, but if it is working, how can I stack my items???
Finally, I have one remark about Cwicly grid CSS.
grid-template-columns: repeat(2, minmax(0, 1fr)) work better for me than repeat(2, 1fr) because it preserves items width and alignments.
Sometimes you need to grab the items and position them again on the same place to make the changes apply! At least that’s what I’ve realized so far… 
Sorry I don’t understand… I can’t move anything.
Sorry in the phone right now that’s why I wasn’t that explicit 
Try to drag those marked items and release them on the same place again. That helped me quite often
1 Like
OK so you gave me an idea and I got the auto grid working by removing modules 2 & 3.
This is so unintuitive…
OK, thank you, I’ve understood what you meant.
When you don’t activate auto grid, you can move modules, and you’re right, after moving items and back to their original place, it is working!
Yeaaah that’s exactly what I ment! Seems like that there is some kind of state variable which needs some additional input to also change it’s state for breakpoints!
And btw i think it’s some kind of bug, since changing the fraction number should also set the css for the breakpoint, but that hack kind of works.
Yeah i also had some problems with the grid editor at first. But after a while of working with it i find it a way better solution than oxygens or bricks solution for example
With O2 and Bricks I use my custom CSS for grids.
I think O2’s grid is actually not so bad, but I’m so used to my framework that it slows me down each time.
I guess I’ll have to get my CSS back for Cwicly as well 
I really do recommend you take a few moments to check our video on this, all is explained precisely.
Your issue here is that your grid setup is not correct for an auto grid
If you want it to be 1fr, what are those 2 other modules doing there… Please remove them.
Auto grid = repeated row.
OK I found videos in query doc, sorry!
That said, I find it’s a bit complicated for such simple “3 to 1” responsive grid. But I guess it’s because it can handle much more complex layouts
Maybe a more direct option for basic grids would be nice, just above the auto grid toggle.
Like only the number of fractions.
What about the non auto grid issue (having to move modules around to make it work)?
And replacing 1fr by minmax(0, 1fr)? An option could be added for strict width respect.
1 Like