search

goodformandspectacle / v_and_a

1 stars 0 forks source link

Fix/improve home page layout for tablets/mobile #14

Closed george08 closed 9 years ago

george08 commented 9 years ago

The three columns wrap to two on tablet today, and are hanging to the right in a single column on mobile.

infovore commented 9 years ago

So one way around that would be, rather than just making a series of floated lis, would be to use the columnar grid from bootstrap: iterate over the images in groups of 3, making rows, making the images max-size the size of the column.

That way, you'll get flexible sized columns on most devices, and a single column on mobile; it'd be possible to make it a grid on all devices, but the easiest way to do that would be with row-based markup, I think.

infovore commented 9 years ago

OK - I've updated this on live. It should be a 3x3 grid down to tablet-portrait; on mobile, it's a single list. I can also make it a 3xwhatever grid on mobile, but the images get quite small. Let me know what you think!

george08 commented 9 years ago

Good! Thanks for doing that. I thought I could but couldn't work out where you were printing out the array :)

On 2 Jan 2015, at 18:55, Tom Armitage notifications@github.com wrote:

OK - I've updated this on live. It should be a 3x3 grid down to tablet-portrait; on mobile, it's a single list. I can also make it a 3xwhatever grid on mobile, but the images get quite small. Let me know what you think!

— Reply to this email directly or view it on GitHub.

george08 commented 9 years ago

Also snipped off top AGAIN! because I've put it at the bottom, which feels like the better spot.

infovore commented 9 years ago

The latest deploy has pushed out that change to the homepage, too.