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

General Discussion

Posted by Alex Chow
Alex Chow
4,521 Points

Bootstrap Responsive Question

Hi there,

I'm currently coding my portfolio site to be responsive so it can be viewed on all devices. I'm new to bootstrap and responsive coding so I've been seeking help on how to make items shrink proportionally when the screen dimension shrinks.

For example, on this bootstrap sample site: http://getbootstrap.com/examples/theme/, the panels section (towards the bottom) has three columns much like mine. When the screen dimension shrinks, the panel boxes shrink proportionally. I wanted to know how I can achieve this effect. Is this done with media queries?

1 Answer

Shawn Flanigan
PLUS
Shawn Flanigan
Courses Plus Student 15,815 Points
Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

Alex: Bootstrap should take care of the media queries for you...you basically just need to add the right classes to your html. Bootstrap's documentation is pretty thorough and you can find the grid system explained here.

In short, the 3 columns you referenced in your column were created using markup like this:

<div class='row'>
    <div class='col-sm-4'>Content for the first column goes here.</div>
    <div class='col-sm-4'>Content for the second column goes here.</div>
    <div class='col-sm-4'>Content for the third column goes here.</div>
</div>

Hope that helps!

Alex Chow
Alex Chow
4,521 Points

Yes, this worked. Thank you. I had one more question related to the above.

The section I'm creating is to display my portfolio/gallery images. I have set up several rows with three columns (col-sm-4) that contains images of my work. I recently learned from a video on treehouse how to link an image using css as shown here:

.Piece-01 { position: relative; width: 00; height: 00px; top: 0; right: 0; bottom: 0; left: 0; background: url('../Images/imagetitle.png') no-repeat; background-size: 100%; }

I noticed when I specify a width and height for that image, it will not properly shrink when the screen dimension shrinks. If I remove both, the image will not display. If I leave only a height, it will display but then the height affects the vertical spacing between the rows when the screen dimension shrinks. I wanted to know if there is something I need to include/remove.