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 Jesse Stanton
Jesse Stanton
15,595 Points

Finally building my first site, need help with photos/text

So I'm building a new website for my daughter's preschool. Luckily the old one was so out of date that whatever I do will be an improvement. I'm having a problem I can't fix and wondering if anyone can help me out. Partway down the first page I'm trying to do three columns, with pictures in the left and right columns and text in the middle. I've created my three columns, displaying them inline-block, it all looks OK. When I shrink the browser the text starts to cover up the picture in the left column. I wrote a media query that said below a certain width each column should have a width of 100% and the pictures should be displayed inline, but that didn't seem to work or to help at all. Can anyone give me some ideas how to keep the text off the picture?

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

It's hard to offer a suggestion without seeing code. Can you post a Codepen showing an example?

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

Would it be possible for you to attach your code in a CodePen or something? If not, don't worry about it. :)

9 Answers

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

Thanks! That does help. In your HTML, for both images in your columns, you have the width and height attributes set. These prevent your images from resizing automatically, so you should remove them.

I've forked your pen and I'm working on it over here, if you'd like to take a look at my changes. I'm using stock images to replace yours.

EDIT: Also, you should wrap your columns in a container. In my fork, the container is the section element with the .cols.three classes.

EDIT 2: All right, I think I got it fixed. It's all in my fork.

Ryan Duchene
PLUS
Ryan Duchene
Courses Plus Student 46,022 Points
Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

Have you made your images responsive too? Try adding this to your stylesheet and see if that fixes it:

img {
  max-width: 100%;
}
Ryan Duchene
PLUS
Ryan Duchene
Courses Plus Student 46,022 Points
Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

Float all the columns left (it sounds weird, but trust me), give them each a width of 33%, and remove their max-widths. Apply overflow: auto to the element containing the columns.

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

Floating everything left will make them all align in the same direction so that they won't overlap each other as the page is shrunk. Increasing their width allows them to take up more space, and removing their maximum width will remove any inconsistencies.

Adding overflow: auto to the parent element is a clearfix hack that will prevent floats from flowing out of their element and ruining everything, as is their tendency.

Hope that helped!

Edward Bryan Kene Morales
Edward Bryan Kene Morales
7,374 Points
Edward Bryan Kene Morales
Edward Bryan Kene Morales
7,374 Points

Hi Jesse,

Would like to help you. But can you show your code so I can have a clear understanding of what's going? Or perhaps you can share the link if you are staging the website online.

Jesse Stanton
Jesse Stanton
15,595 Points
Jesse Stanton
Jesse Stanton
15,595 Points

Tried that img addition and it helped a bit but it also made the pictures warp in an unpleasant way. I have it saved in a workspace and I just went to codepen and saved it there but how do I post that here?

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

Just copy the link to the CodePen and paste it here. :)

Jesse Stanton
Jesse Stanton
15,595 Points
Jesse Stanton
Jesse Stanton
15,595 Points

http://codepen.io/Jessestanton/pen/JoYvPG

Jesse Stanton
Jesse Stanton
15,595 Points
Jesse Stanton
Jesse Stanton
15,595 Points

That's the CSS, anyway. The pictures are in the columns.

Wayne Priestley
Wayne Priestley
19,579 Points

Hi Jesse,

Could you add the html too please.

Thanks

Jesse Stanton
Jesse Stanton
15,595 Points
Jesse Stanton
Jesse Stanton
15,595 Points

OK, I put the html up too, with some identifying details removed. I'm thinking maybe it has something to do with the sizes of the pictures being set, but I feel like there still must be some way to say "Text, don't go on top of this". My idea was to do a media query that would basically say, if it's below a certain size, then each column should take the full width of the container, and that way they don't overlap. That doesn't seem to be working.

Is there really not a CSS property that would just say "Nothing can overlap this"?

Jesse Stanton
Jesse Stanton
15,595 Points
Jesse Stanton
Jesse Stanton
15,595 Points

Thanks so much, this was awesome. That really does work and now I think I know how to do it in the future.

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

Glad I could help!