Project Solution: Pinterest Homepage Summary
This guide walks through a summary of the Pinterest homepage project and discusses the code elements that made the solution possible.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license
APPLY NOWLEARN MORE

Now that we've built the solution, I want to give you some tips on how you can take it forward from here.

If you go to the Pinterest site, you'll see that it goes from edge to edge, whereas ours doesn't, and this is because we have hard-coded the width dimensions in our wrapper selector. To fix this, remove the max-width and min-width attributes, and change the width to 100%.

This is how the output looks now.

large

If you see, the images are too big, and don't look nice! We can increase the column size to 5 instead of 3 in our #columns, and this looks better.

large

You can even duplicate these images a couple times more to get a total of 20 images, and it'll all look nice on the page. You can play around with these options some more to get a better feel of it all.