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
mrx3
8,742 PointsI need some help making my columns "responsive" please.
My code pen is pasted below. I made three columns with some text. For some reason when I try to resize the browser the columns will not adjust to browser width. I think it may have to with the fact I used pixels instead of a percent's. I tried to look up how to convert pixels to percent's but I can't seem to find the right answer. Can someone please explain how to convert pixels to percentage. I could be to way off on this being the problem. I also have a problem with the last column, number three when I resize the browser the third column will "adjust" and push out of the webpage all the way past the footer. Why does this keep happening? I'm kind of a beginner with columns, so if I really messed this up sorry. And also thank you for any help you can give me.
3 Answers
Ryan Duchene
Courses Plus Student 46,022 PointsI forked your pen and added percentages.
Basically, percentages are a method of defining size in the context of the parent. If I want my container to have a width of 95%, it should be 95% (or 19/20 or nineteen-twentieths) of the body (page) width. If I want a column to occupy one-half of a webpage, that's 50%. If I want a sidebar to occupy one-third of a webpage, that's (approximately) 33%.
When you want to calculate a percentage, just take the number of elements you want and 100 by that amount. So you want three columns; divide 100 by 3 and you get about 33%. So I started with 33%, but because of padding and margin, that was a little too wide. So I ended up bringing it down to about 30.5%.
For responsive behavior, you should be using percentages for widths and horizontal padding and margins. This allows those paddings and margins to adjust when the screen is resized.
Hope that helped!
sjbrown0324
13,995 PointsHello Mr. X,
I'm still really new at this but if you want to maintain three columns as the browser is re-sized change the pixel to percentages. You'll want to look at each column in the container and determine how much of the container you want it to occupy.
If you want each container to take up 30% of the containers width at a given size then use that as your width. Adjust the margins as percentages as well.
For example if your container is 100% and you want your columns to stack side by side with a margin around each column then determine how wide you want the margins on subtract it in percent from your total. Or if you want your columns to take up 30% that will leave 10% to distribute as margins around your columns.
In reviewing your code: Try adding a width of 100% to your main-content class. Then you'll be able to change the width of the columns to a percentage. Although you could still leave the margins as px and see what that gets you.
There is of course more to it. You'll need to change the padding on the contents so it will adjust with the container size. You'll also need to determine how small you will allow the screen to get before you change the number of columns.
Hope this helps. If you need an example there is a deep dive in the CSS Foundations course that gives a thorough description of how to make it happen.
mrx3
8,742 PointsThank you for your help.
Shawn Williams
Courses Plus Student 4,462 PointsSince you have a max-width of 960px, dividing that by 3 would give you 320px for each column. Since you have indicated that you want a margin of 10px on the left and right side, you are left with a width of 300px for each column. To find the percentage, divide 300 by 960 to give you 31.25%. This is what your column width should be. Multiplying this by 3 gives you 93.75%, which leaves 6.25% for your margins. Since there are 3 columns with 2 margins each, you would divide 6.25% by 6 to get approx. 1.04% for each margin. Replace your 10px margin with 1.04% and you are golden.
mrx3
8,742 PointsThank you Shawn.
Shawn Williams
Courses Plus Student 4,462 PointsYou are very welcome. You got some really good answers here and I hope I helped to break it down a bit rather than add confusion.
mrx3
8,742 Pointsmrx3
8,742 PointsThank you so much Ryan! I really appreciate your help.
Ryan Duchene
Courses Plus Student 46,022 PointsRyan Duchene
Courses Plus Student 46,022 PointsGlad I could help!