Zyring Day 14 – Masonry and responsive design.

[Note: These are more in-depth (read: tedious) write-ups of my experience with each section of the Zyring project, leading on from my intro post on Zyring. This is mostly for my own benefit but could conceivably be of use to someone doing the project.]

Install Masonry library

In this tutorial, I install Masonry, a new directive that’s supposed to take care of placing images that are different sizes. I’m not really sure I see the point of this, as all the apartment images seem to be thumbnail images of the same size. Maybe a previous version of the backend data had variable image sizes? Bigger images would also be nicer for styling the pages…

I dutifully install the library anyway, play around with it for a bit, then revert to my previous styling without Masonry. I’ll keep the Masonry stuff commented out in case I need it for a later tutorial.

Make your ‘All Apartments’ page responsive

I.e., check it works OK for different screen sizes. This is actually fine straight off thanks to Bootstrap. If I’m being fussy, the map could do with being centred better, but I should probably muck around with the scaling on that in general some time. At the moment it is zoomed out on the whole Seattle area each time (to cover all six cities), but I should really zoom in on each one.

It was good to play around with the screen sizes in the Developer Tools though and see what it looks like on different phone and tablet screens, never used that before.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s