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!

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 Fadli Hidayatullah
Fadli Hidayatullah
2,691 Points

How to make the paragraph box in the picture box [caption] same?

When i created a web page in the How to make website tutorial, I floated the list item, but unfortunately, when the caption text length is more than the others, the structure of floats list items become ugly, how do I fix that, to make the caption boxes are same in size? should i used height property?

Marco Boretto
Marco Boretto
29,821 Points
Marco Boretto
Marco Boretto
29,821 Points

hey Fadli, can you post the stylesheet and the markup?

Fadli Hidayatullah
Fadli Hidayatullah
2,691 Points 
<div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending modes in Photoshop.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create an 80's style of glows.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Drips created using Photoshop brushes.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repetition.</p>
            </a>
          </li>
        </ul>
      </section>

#gallery a p {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: 0.75em;
  color: #ccc;
  padding: 5%;
  height: 50px;
  overflow: auto;
}

1 Answer

Kailash Seshadri
Kailash Seshadri
3,085 Points
Kailash Seshadri
Kailash Seshadri
3,085 Points

Hello Faldi i noticed that u r using the selector 

#gallery a p {
  stuff
}

while in the gallery, you have the anchor elements nested inside list elements, so i would recommend changing the selector to:

#gallery li a p {
  stuff
}

Hope it works! Happy Coding!