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!

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


portfolio layout

So I am working on revamping my portfolio site and thinking I want to go with a layout sort of like that I have in this codepen


where the over view shows a cover art/icon/featured image whatever you want to call it. That image takes up 100% of the .portfolio__item container and then within that container have a title at the top set of spans at the bottom that show what skill-sets were used for that project "CSS, Sass, LESS, WordPress, Android" etc. much like treehouse divides up their courses in the library.

clicking on a particular portfolio item would take the user to that pieces page which would have all the info they'd wants like what was done, why it was done, links to the site/project in the wild, link to the repo if its something I did that is meant to be open... right now I am defining a min and max height and widths per portfolio__item that are the same but I think to make it responsive I need to make those dynamic with media queries so they flex to some degree but don't drop under a minimum if at their minimums they don't all fit on the screen in a row, then break to the next line.

The problem with grids like bootstrap is they have no minimum/maximum per element that I can tell so they just continue to squish until you define another media query for example .col-xs-2 or .col-sm-4 which is a bummer because its targeting device instead of browser space.

I am designing the whole thing in CSS and then I'll go back and use Sass to clean up the code. I'm going to be using the BEM naming convention.

Guil Hernandez what do you think? Whats the best way to approach this.

Any guidance is appreciated.

edit: I should add that the problem with doing it my current way is that there is a big margin on the right between breaks.