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

CSS

Posted by Jelena Jeremic
Jelena Jeremic
7,730 Points

Responsive images with media query

I have finished CSS layout basics course, and now I am trying to practice on my own. However, I have a problem with images. If I set the image width to 100% it is way too big, so how do I make it smaller? Is it ok to set it to 50%, for example? One more question. When I view the page in small screen mode, there is one column (just like i wanted), but the text is not wrapped around images anymore. How do I fix that? Thanks

Loek Weijts
Loek Weijts
6,159 Points

I had this too! If you put the image in a container div with a fixed width in pixels then you wont have that problem.

2 Answers

Trevor Johnson
Trevor Johnson
14,427 Points

Setting the image width to 100% is going to make it take up 100% of the width of its parent element. If you put it within a <div> for example, and give the <div> a set width and height, and then make it 100%, it will always have it's parent <div> filled.

For the second part of your question could you please post your code so that I can see it? It's hard for me to say what the problem is right now.

Jelena Jeremic
Jelena Jeremic
7,730 Points

I managed to make my images look better on small screen. However, my columns are kinda messed up (I put this gray background so I can see how my content behaves). I hope you will find time and take a look at my code. This is my first project, so I am feeling lost. Thanks a lot!

https://codepen.io/JelenaJay/pen/WpwWeL

Trevor Johnson
Trevor Johnson
14,427 Points

Your project looks good. What is it about the columns that you think are messed up? What is it that you are trying to achieve with your images and columns?

Jelena Jeremic
Jelena Jeremic
7,730 Points

I was trying to make those three columns more equal, since the third column is too short. Or, I should simply try to divide my content better, so I have almost equal columns?

Trevor Johnson
Trevor Johnson
14,427 Points

The only thing that I can think of right now is to use flexbox to make the content stretch to the bottom of its container. There might be another way but I am not sure. Check out these resources. flexbox is simple to learn so if you want to check out these resources they might help.

https://teamtreehouse.com/library/css-flexbox-layout

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Jelena Jeremic
Jelena Jeremic
7,730 Points

I check it out. Thanks a lot for your help Trevor.