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

Design

Posted by John Weland
John Weland
42,478 Points

A little Design Help

I am not sure if this is a good fit here however....

I am currently on the Web Developer track and decided I would work on my portfolio website while I work on this track. I would use any trick I learned that I didn't already consider to help round out said page.

I am using the latest JQuery and Bootstrap, I have designed my page to have a carousel of 3 of my "featured" works and then under that a collapsible view of my projects. The collapsed view should have a the project title, screenshot, and brief paragraph about the project and upon expanding it it should have a 'tag cloud' showing the "technologies used" on the project as well and a more verbose blurb about the project.

Currently on displays 769px wide it lays out alright (slight glitches in the vertical placement of objects), 1208px wide and higher it lays out perfectly. however 768px wide and below, when bootstrap stacks my columns into a single stack my "tag-cloud" should display last but because of the HTML structure it lays out right between my description paragraphs. I realize its because of how the HTML is formed unfortunately I can see another way to structure my HTML to achieve my desired result on larger displays (769px +). My first thought was to do some DOM interaction at my break point (768px) and have it remove the HTML in question and append it after the description paragraphs... that is a bit beyond me though and I feel there is a better way to structure my HTML to achieve my needs.

Any help is appreciated, here is a PEN to the project. http://codepen.io/johnweland/pen/vcmEk

John Weland
John Weland
42,478 Points

I've made some headway. I changed the order of the .tag-cloud and the expanded paragraph so that in mobile view the .tag-cloud is at the bottom. I then added .pull-left and .pull-right classes to may them reverse order when showing up side by side. Still there is the vertical alignment issue caused by having my content in .row classes.

codepen updated to reflect my changes