One issue I am having (already reported to devs) is setting up different responsive views between tablet and mobile-portrait. I’m wondering if anyone else is experiencing this? Its a big help, to me and the devs, if its isolated to only me.
I haven’t thoroughly tested everything but it appears that when I make a change to an element in mobile-landscape, it bubbles up vs only bubbling down. For example, if I change a section to single column in mobile-landscape, from say a 2 column grid that was defined in desktop view and unmodified in tablet view, when I go back to tablet mode (larger media query resolution) it is also single column which is typically not desirable at this resolution, desktop is unaffected by the change. Another example is when I changed the font size of an element in mobile-landscape, it changed the size in tablet mode (bubble up). This only appears to be happening between the two screen sizes, tablet and mobile-landscape. Desktop and mobile-portrait seem to work as desired.
I am using the latest version of Chrome as of posting this.
Manually adjusting the css export is the current solution.
Also, I noticed with 4 column, I get the 2x2 option only in mobile views. Will this be changed in a future version?
Hmmm this sounds like a bug because it definitely shouldn’t behave like that. Can you help me reproduce it? Does it always happen for you or just sometimes?
Also, for the 2x2 option in the tablet, would you find this useful? We can add it.
Yes I can duplicate it every time. At first I thought it might have been something I was missing when I started out with a prebuilt template but then I create a new site from scratch using a blank template and had same results.
Regarding the grid, I think it would be most flexible to alter the grid in each media query (of course as long as it doesn’t affect DOM elements being manipulated, i.e. going from a 2 column to a 3 column doesn’t make sense right because thats an extra div element) But say a 4 col to 2x2 or even 3x1 could work using floats and clears.
We just pushed a fix to get this resolved. @pingram3541, could you check if it’s working for you?
In terms of the grid, I think it’s already possible to do what you’re asking. For example, if I create a super custom 6 column row in desktop, I can switch to the Settings panel (shortcut: D) and then specify media-query-specific behavior for those columns:
In this case, it will balance out all the columns in tablet view, will stack 3x2 on landscape phones, and will stack 2x3 on narrow portrait phones. In all these cases, we are not changing the DOM nodes, just applying more specific classes that only kick in in certain resolutions.
Seems much better but I still want to play with it some more. One thing from your example is what if I wanted 1 fluid column in tablet, or what if I wanted 6 columns in both mobile views…where are those options using the image above in your example?
We figured not many people would want 1 fluid column in tablet or 6 columns in mobile view because in Tablet you usually want to utilize the resolution and in the mobile views you want to have your content be easier simpler and easier to digest. In most cases 6 columns with content inside for mobile would be too much.
Yes, I very much agree when thinking in a general sense of use, for example I would rarely use or need a 6 column grid under 320px but seeing as though content can be anything…one might use an image gallery as an example since those are very popular on handheld devices, it would be much easier to use an already defined grid when one doesn’t necessarily want wrapping of images. Could something like this work?
The mockup above by @pingram3541 shows a solution for an issue I ran into earlier today: I have a table that has 1 wide column for descriptions and two narrow ones for punchlists (checks). Alas, when it gets down to the phone media queries, my only options are to stack the cells in each row () or to have three identical width columns.
In general, it might not be a great idea to try to present a table like this in phone, especially portrait, media queries. But I need to and my custom embed version actually scales fairly well, but I’d prefer to have the table native in webflow if possible. (Also, I discovered too late that Android doesn’t support one of the features that made my custom table work so well, and so I need to rework it anyway.)
Anyway, big thumbs up vote for a feature like pingram3451 posted above!
) or to have three identical width columns.
