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 Cristian Castro
Cristian Castro
Courses Plus Student 12,666 Points

My images in the webpage aren't displaying correctly

In my webpage, when I adjust the size of the screen to look more like a mobile device, my pictures start acting weird. I have them in an unordered list with text. It looks like when the text wraps with the size of the screen and create a new line the picture moves out of the way and creates an empty space. How do I fix this? I know it has to do with CSS but I'm not sure what coding to use.

2 Answers

Mike West
Mike West
9,163 Points
Mike West
Mike West
9,163 Points

Hi Cristian-

Are you working on a personal project or is this in reference to one of the lessons? Either way can you post your code? And are your images not resizing when you shrink the viewport window or is the issue that the images shrink in size but you're having issues with the way the text is wrapping?

Cristian Castro
Cristian Castro
Courses Plus Student 12,666 Points

@media screen and (min-width: 480px) {

primary {

width: 50%;
float: left;

}

#secondary { width: 40%; float: right; }

#gallery li { width:28.33333%; }

#gallery li:nth-child(4n) { clear: left; }

Cristian Castro
Cristian Castro
Courses Plus Student 12,666 Points

I'm having problems with the way the text is wrapping and the images move.

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

This is a bit beyond something that can be covered adequately with an answer here. But luckily, Treehouse has several CSS courses that cover designing for various media sizes. These would include: CSS - Beyond the Basics and Responsive Layouts.

But be sure to start with CSS Basics if you haven't done it already.

Cristian Castro
Cristian Castro
Courses Plus Student 12,666 Points

Yes, I followed everything they said but I am still having issues.