Grid behavior on mobile

[dnohr]

Version info

• Milligram 1.3

Steps to reproduce

<div class="row">
<div class="column">test</div>
<div class="column column-20"">test 2</div>
</div>

Expected behavior

I expected to see 100% width on the mobile grid, like other css frameworks are doing it.

Actual behavior

The grid keeps the percentage width but on two lines, which looks strange.

On Desktop

On Mobile

Any solutions on it or is it the expected behavior?

[cjpatoilo]

Hey @dnohr Good call!

I really liked the idea. In fact, I had already imagined something like that, but I'm not sure if everyone uses it that way. It would be interesting to map this information. Could you show me what CSS frameworks use 100% on mobile?

[dnohr]

Hi @cjpatoilo,

Seems like these frameworks are doing it:

• MinCSS
• Bulma

I guess the solution would be to override the "column-20" width 100% if it's on mobile. Would it be possible?

Thanks for your work 👌🏻

[cjpatoilo]

@dnohr I have found a way to add this support and maintain the current behavior. 👍
Thanks for reporting this improvement.

[martinffx]

I'm having the same issue?
How does one resolve this?

On mobile I expect the grid to break the columns into rows and it is staying exactly the same as it was when on desktop.

[celebritydeveloper]

Can I fix this issue?

[cjpatoilo]

@celebritydeveloper this behavior was fixed. Look the demo:

[cjpatoilo]

@dnohr @martinffx For now, I will close this issue.
Please, feel free to reopen or open a new one.