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 Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Cant figure it out

Hi,

Im trying this boxes to look like in this page. I want to make them the same but i get some errors.

Heres my code

http://codepen.io/anon/pen/dPoKmE

Does anyone know how can i fix it? it has be also responsive so it resizes and later one i can add media queries to make it mobile.

3 Answers

Aaron Lafleur
Aaron Lafleur
10,474 Points
Aaron Lafleur
Aaron Lafleur
10,474 Points

If I understand what you're looking for correctly, add border-radius: 25px; in your .box features. (25px is arbitrary. Play with the values.)

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Hi, thank you for the help but I'm not looking for border-radius.

Im looking for the images to be same width as the red background .
The text to be under it with the image proportions in the middle without going out with the box and having e.g 10px. I hope this is better : p

Nathan Flateau
Nathan Flateau
7,551 Points
Nathan Flateau
Nathan Flateau
7,551 Points

Maybe try box-sizing: border-box; with the img selector?

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

what do you mean?

Nathan Flateau
Nathan Flateau
7,551 Points

I'm not too familiar with CodePen, but I can't see the images to play around with it.

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Um, it does not make any effects : /

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

And believe me i could do it before :( this is soo anojjing, i could just do it anyways . I think i gonna spend 2h per day in iOS and here so i don't lose what i learned there.

Nathan Flateau
Nathan Flateau
7,551 Points
Nathan Flateau
Nathan Flateau
7,551 Points

Have you tried:

  background-size: contain;
Aurelian Spodarec
Aurelian Spodarec
7,369 Points

This does not work either.

My problem is that i want to make this 3 columns horizontal like on the original webpage. Then underneath it , theres text that is like centred between margins on it and when you resize the window , it stays the same. i just can't remember how its done.