Supports multi-column responsive layout of blocks on mobile phone

Is your feature request related to a problem? Please describe.

Sometimes I want to make the following layout for content preview or page navigation, etc. It works well on the desktop, but the effect on the phone is not good, it’s terrible.

On desktop app:

On mobile phone:

Describe the solution you’d like

Should support multi-column responsive layout of blocks on mobile phone.

As shown below (Sorry for the poor picture PS level :sweat_smile: ):

Describe alternatives you’ve considered

I don’t know if the unreleased “callout” can support this feature in the future.

2 Likes

While I don’t necessarily disagree with this desire, I do think it’s a significant design challenge because I have yet to see a similar block-based app that is multi-column on phones. Notion and Craft are both clear examples, AFAIK. Certainly Notion is (I don’t have an iOS device to verify on Craft, but from what I’ve seen and read in reviews, it does the same conversion of multi-column to single linear column). Do you have any examples to point to that show this working?

@Oshyan It seems that craft does not support user-defined column layouts. For pictures, files and cards (a page link with a beautiful card preview), Craft has predefined layouts. The pictures can be adaptively displayed in two or three columns on the desktop and mobile phone. The cards and files (displayed as cards) can displayed in 3 columns on the desktop and two columns on the mobile phone.

For pure web apps, the multi-column display on the mobile phone can be achieved by adding small css codes. The following are two posts I found on how to implement multi-column display on the mobile phone, one is a youtube video,

[https://www.youtube.com/watch?app=desktop&v=oFJPKXls_2Y]

and the other one (not video)

[https://www.ezoic.com/how-to-keep-columns-side-by-side-on-mobile-in-divi/]

Is it possible to add a special block to support add multiple columns in it, and it can be set to smart and or manually responsive layout on mobile phone.

Many websites have a mobile and desktop view. And even on mobile you can often choose to load the desktop version of the website. Which is less optimized but with current phones often works perfectly fine.

Maybe a future version of the app could have an option in the settings to view pages as the desktop version (that keeps the layout but might be less optimized?).

I use notion’s “about” page to illustrate the effect I want. The following are the three display effects of notion’s “about” page on desktop, tablet and mobile phone. The responsive design is very good, and the layout is obviously much better than only one single column.

@michaellw Agree. Can probably be fixed with some CSS.

Currently the CSS seems to simply stack all columns whenever mobile is detected, regardless of column configuration/size.

It should have at least a couple of rules for how different configurations of columns should show for certain screen widths.

With [Custom CSS](Custom CSS), users could even decides themselves where these breakpoints are.

https://community.anytype.io/t/-/1716

These are good examples and points, but of course doing layout in Anytype is more complex than just a simple web page. Hopefully they can figure out a good way to allow for multi-column on mobile. But I think it’s important that no one here has yet provided an example of another block-based tool that does what you’re asking Anytype to do. If it was as simple as just using the CSS you’re pointing to, don’t you think someone would have done it by now? Craft seems to come closest, but only some object/block types can be shown in columns on mobile, and I would guess this is partly because it is easiest to sensibly transform them and have the result still look and function well (you just scale them; you can’t do the same with text, much less more complex formatting).

1 Like

@Oshyan True. I’m assuming what we see is html+css. Not sure if that is the case.

@Oshyan I’m glad that you also think this is an important thing. This is about user experience. User experience is extremely important to a product, especially for someone like me who “judges product by appearance”. (Just kidding :grinning_face_with_smiling_eyes: )

1 Like