search

mobi-css / mobi.css

A lightweight, scalable, mobile-first CSS framework
http://getmobicss.com/
MIT License
2.34k stars 145 forks source link

Collapse columns #18

Closed subversivo58 closed 7 years ago

subversivo58 commented 7 years ago

Collapse columns in small screens (e.g: < 500px) ?

The visibility in mobile devices is affected since the columns do not automatically expand into a single row.

xcatliu commented 7 years ago

Thanks for your feedback! Actually this is part of my design.

Unlike other responsive framework, Mobi.css is designed for mobile devices. In my opinion, A designer should think about the design of small screen (The smallest is 320px for iPhone 5), and the design should looks the same as large screen (i.e. 414px for iPhone 6s).

So if one row cannot accommodate your cols on small devices, maybe you should redesign it.

If you want to implement a wrap-able row, you can manually set flex-wrap: wrap to row

Thanks!

subversivo58 commented 7 years ago

Excuse me. I'm terrible with front-end but logic tells me that if I create a line with two columns example:

A 1-4 column to display an image and a single column that had occupied the rest of the line to display a description.

If the framework is focused on mobile when I open a lower resolution (mobile) it should collapse these columns to display the image and below the description. Would not it?

Regardless of how you would treat your css it should be automatic in the framework or not?

subversivo58 commented 7 years ago

Sorry, my poor englis

xcatliu commented 7 years ago

A 1-4 column to display an image and a single column that had occupied the rest of the line to display a description.

If the framework is focused on mobile when I open a lower resolution (mobile) it should collapse these columns to display the image and below the description. Would not it?

Most of css framework follows this rule. But I don't think that is the right way.

When you are using native apps, such as WeChat, Twitter, WhatsApp, etc. They all have an image-content design (actually it's media object in Bootstrap). But none of them will show two rows in small device.

So my suggestion is you should design your website for small devices (like 320px width for iPhone 5), and for large devices, it should looks the same with small devices.

subversivo58 commented 7 years ago

ok, thanks.