News for hackers. Stuff that matters.

A comment on Flexbox and Grids: your layout’s best friends. Parent comment

Re:Flexbox and Grids: your layout’s best friends by gjjrfcbugxbhf on Tuesday November 07, 2017 @02:06AM (#15641534)
Well the table based layout does not work on mobile. The float, flex or grid based layouts do.

So we've come somewhere but there is further to go and maybe we didn't need to go in so many circles.

[ Parent | on HN ]
Re:Flexbox and Grids: your layout’s best friends by Nition on Tuesday November 07, 2017 @04:15AM (#15641951)
What's broken with table layouts on mobile? I just tested my code above on Safari on iOS 10 and it displayed as expected.

Here's the live HTML I uploaded for testing: http://momentstudio.co.nz/temp/test.html

This page we're on now also runs mostly on tables.

[ Parent | on HN ]
Re:Flexbox and Grids: your layout’s best friends by losvedir on Tuesday November 07, 2017 @09:06AM (#15643423)
> What's broken with table layouts on mobile? I just tested my code above on Safari on iOS 10 and it displayed as expected.

Depends what you'd expect, I suppose. These days, I'd expect the columns to switch to a vertical stacking layout when viewed at a mobile width. I guess maybe it's not "broken", per se, but it's not responsive and certainly pretty limited in how it can be used.

[ Parent | on HN ]
Re:Flexbox and Grids: your layout’s best friends by c-smile on Tuesday November 07, 2017 @12:40PM (#15645555)
What stops you from declaring

   table { display:block; }
etc. if you need to transform your table into vertical flow layout?
[ Parent | on HN ]
Re:Flexbox and Grids: your layout’s best friends by gjjrfcbugxbhf on Tuesday November 07, 2017 @01:33PM (#15646107)
Or even...

.responsive { display: block }

@media(min-size: 768px) { . responsive { display: table }}

[ Parent | on HN ]