Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Edward Bryan Kene Morales
7,374 PointsUsing masonry js and foundation
Hi guys, I am really hoping someone will help me out on this. I have been trying to use masonry and foundation but to no avail.
What I am trying to pull off is a gallery with a three row panel. Each panel will have images and text and will determine the height of each panel so no two panels will have the same height.
I am using foundation's grid structure to define the width of the columns. No problem with that but my issue is how do I use masonry to make the columns fit nicely.
I tried using 33.33% in the columnWidth setting of masonry but it's not working.
My JS knowledge is somehow limited. Will really appreciate any help from you guys. Thanks!
1 Answer
Rich Donnellan
Treehouse Moderator 27,671 PointsI'm not familiar with this library at all nor can we see your code, but you may need to set the percentPosition to true for responsive layouts (see the documentation).
Item sizes can be set with percentages for responsive layouts. With the masonry layout mode, set percentage-width columnWidth with element sizing. Set percentPosition: true so item positions are likewise set with percentages to reduce adjustment transitions on window resize.
Hope this helps some.
ā Rich