Tea Cozy

Can anyone suggest ways to caption the photos in the “Tea of the Month” section of the Tea Cozy project?

here’s a link to the exercise:
https://www.codecademy.com/paths/web-development/tracks/getting-more-advanced-with-design/modules/layout-with-flexbox/projects/tea-cozy

I’ve tried using and that indeed does add captions but it somehow affects the flexbox layout and I’m not sure how to fix this. Specifically, it seems to make each photo “wider” so that only two photos fit on a line instead of three.

Here’s my html:

<!DOCTYPE html>
<html>
<head>
  <title>Tea Cozy</title>
  <link rel="stylesheet" type="text/css" href="teacozy.css">
</head>
<body>
  <div class="container">
  <div class="header">
    <img class="logo" src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-tea-cozy-logo.png">
    <ul>
    <li><a href="#mission">Mission</a></li>
    <li><a href="#featured">Featured Tea</a></li>
    <li><a href="#locations">Locations</a></li>
  </ul>
  </div>

  <a name="mission"><div class="background"></a>
    <div class="mission">
      <h1>Our Mission</h1>
<h3>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h3>
    </div>
  </div>

  <a name="featured"><div class="month"></a>
    <div class="title">
    <h1>Tea of the Month</h1>
    <h3>What's steeping at The Tea Cozy?</h3>
    </div>
    <div class="photo">
      <div class="photo-box">
        <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-berryblitz.jpg"/>
      </div>
      <div class="photo-box">
        <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-spiced-rum.jpg"/>
      </div>
      <div class="photo-box">
        <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-donut.jpg"/>
      </div>
      <div class="photo-box">
        <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-myrtle-ave.jpg"/>
      </div>
      <div class="photo-box">
        <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-bedford-bizarre.jpg"/>
      </div>
    </div>
  </div>

<a name="locations"><div class="locationscontainer"></a>
  <h1>Locations</h1>
  <div class="locations">
    <div class="box">
      <h3>Downtown</h3>
      <p>384 West 4th St
      <p>Suite 108
      <p>Portland, Maine
    </div>
    <div class="box">
      <h3>East Bayside</h3>
      <p>3433 Phisherman's Avenue
      <p>(Northwest Corner)
      <p>Portland, Maine
    </div>
    <div class="box">
      <h3>Oakdale</h3>
      <p>515 Crescent Avenue
      <p>Second Floor
      <p>Portland, Maine
    </div>
  </div>
</div>

  <div class = "contact">
      <h1>The Tea Cozy</h1>
      <h4>contact@theteacozy.com</h4>
      <h4>917-555-8904</h4>
  </div>

  <div class="footer">
    <h4>copyright The Tea Cozy 2017</h4>
  </div>
</div>
</body>
</html>

and here’s my css:

.container {
  background-color: black;
  width: 1200px;
  font-family: helvetica;
  color: seashell;
}

a {
  color: seashell;
}

.header {
  background-color: black;
  position: fixed;
  height: 69px;
  width: 1200px;
  border-bottom: 1px solid seashell;
  z-index: 3;
}

.header li {
  display: inline;
  padding: 10px;
  font-size: 22px;
  text-decoration: underline;
}

.header ul {
  float: right;
}

.logo {
  height: 50px;
  position: absolute;
  margin: 10px 5px 9px 10px;
}

.background {
  height: 700px;
  width: auto;
  background-image: url("https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-mission-background.jpg");
  z-index: 0;
  display: flex;              /* establish flex container */
  flex-direction: column;     /* stack flex items vertically */
  justify-content: center;    /* center items vertically, in this case */
  align-items: center;        /* center items horizontally, in this case */
}

.mission {
  background-color: black;
  height: 100px;
  width: 1200px;
  position: absolute;
  z-index: 1;
  text-align: center;
  padding-bottom: 20px;
}

.mission h3 {
  font-size: 22px;
}

.month {
  width: 1200px;
}

.month h3 {
  font-size: 22px;
}

.title {
  text-align: center;
  padding-top: 50px;
}

.photo {
  display: flex;
  height: 500px;
  width: 1000px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: auto;
  padding-bottom: 30px;
}

.photo-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 15px;
  justify-content: center;
}

.photo img {
  display: flex;
  height: 200px;
  width: 300px;
  padding-bottom: 10px;
}

.locationscontainer {
  background-image: url("https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-locations-background.jpg");
  height: 500px;
}

.locations {
  display: flex;
  justify-content: center;
  align-items: center;
}

.locationscontainer h1 {
  text-align: center;
  padding-top: 70px;
  margin-bottom: 0;
}

.box {
  display: flex;
  background-color: black;
  height: 300px;
  width: 300px;
  z-index: 2;
  flex-direction: column;
  align-items: center;
  margin: 15px 20px;
}

.box p {
  font-size: 22px;
}

.box h3 {
  font-size: 25px;
}

.contact {
  height: 200px;
  text-align: center;
}

.footer {
  height: 50px;
  background-color: black;
}

.footer h4 {
  padding-top: 30px;
  margin-left: 20px;
}

I just used the following:

<div class = "item">
  <img source = "...">
  <span>Image Caption</span>
</div>

Another method is to put your images inside a <figure> element, and use <figcaption> like so:

<div class= "item">
  <figure>
    <img source = "...">
    <figcaption>Image Caption</figcaption>
  </figure>
</div>

See here for more on <figure>:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure