Finished Tea Cozy Project, but not able to make it responsive

Hi.

I finished the Tea Cozy Project. It looks like the Spec Sheet requires, but I haven’t been able to make it responsive for smaller screen sizes.
I appreciate any feedback.

Here’s the link to my website
https://www.codecademy.com/paths/learn-how-to-build-websites/tracks/advanced-css-flexbox-and-animations/modules/layout-with-flexbox/projects/tea-cozy

Here’s my HTML code

<!DOCTYPE html>
<html>
<head>
  <title>The Tea Cozy</title>
  <link href="./resources/css/style.css"
type="text/css" rel="stylesheet">
</head>

  <body>
    <!-- Header -->
    <header>
      <div class="content">
        <a href="index.html" class="logo">
          <img src="./resources/Images/img-tea-cozy-logo.webp"></a>
        <nav>
            <a href="#Mission">Mission</a>
            <a href="#Tea_of_the_Month">Featured Tea</a>
            <a href="#locations">Locations</a>
        </nav>
      </div>
    </header>

    <!-- Main Content -->
    <div class="main-content">

      <!-- Mission -->
      <div id="mission">
        <div class="banner">
          <div class="mission-content">
            <h2>Our Mission</h2>
            <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
          </div>
      </div>
      </div>

      <!-- Tea of the Month -->

      <div id="Tea_of_the_Month">
        <h2>Tea of the Month</h2>
          <h4>What's Steeping at The Tea Cozy?</h4>
          <div class="images-container">
            <div class="image-container">
              <img src= "./resources/Images/img-berryblitz.webp" alt="Fall Berry Blitz Tea">
              <h4>Fall Berry Blitz Tea</h4>
            </div>
            <div class="image-container">
              <img src= "./resources/Images/img-spiced-rum.webp" alt="Spiced Rum Tea">
              <h4>Spiced Rum Tea</h4>
            </div>
            <div class="image-container">
              <img src= "./resources/Images/img-donut.webp" alt="Seasonal Donuts">
              <h4>Seasonal Donuts</h4>
            </div>
            <div class="image-container">
              <img src= "./resources/Images/img-myrtle-ave.webp" alt="Myrtle Ave Tea">
              <h4>Myrtle Ave Tea</h4>
            </div>
            <div class="image-container">
              <img src= "./resources/Images/img-bedford-bizarre.webp" alt="Bedford Bizarre Tea">
              <h4>Bedford Bizarre Tea</h4>
            </div>
          </div>
        </div>

        <!-- Locations -->
        <div id="locations">
          <h2>Locations</h2>
            <!-- locations Containers-->
            <div class="locations-container">
              <div class="location-container">
              <h3>Downtown</h3>
                <div class="Street">
                  <p>384 West 4th St</p>
                </div>
                <div class="Number">
                  <p>Suite 108 Portland</p>
                </div>
                <div class="City">
                  <p>Portland, Maine</p>
                </div>
              </div>
              <div class="location-container">
              <h3>East Bayside</h3>
                <div class="Street">
                  <p>3433 Phisherman's Avenue</p>
                </div>
                <div class="Number">
                  <p>(Northwest Corner)</p>
                </div>
                <div class="City">
                  <p>Portland, Maine</p>
                </div>
              </div>
              <div class="location-container">
              <h3>Oakdale</h3>
                <div class="Street">
                  <p>515 Crescent Avenue</p>
                </div>
                <div class="Number">
                  <p>Second Floor</p>
                </div>
                <div class="City">
                  <p>Portland, Maine</p>
                </div>
              </div>
          </div>
        </div>

      <!-- Contact -->
      <div id="contact">
        <h2>The Tea Cozy</h2>
          <div class="contact-info">
            <h5>contact@theteacozy.com</h5>
              <p>917-555-8904</p>
          </div>
      </div>


      <!-- Footer -->
      <div id="footer">
        <h5>copyright The Tea Cozy 2017</h5>
      </div>
    </div>
  </body>
</html>

and here’s my CSS code:

html {
font-family: Helvetica;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
text-align: center;
}

/* Header*/

header {
  position: fixed;
  background-color: black;
  z-index: 100;
  width: 100%;
  border-bottom: solid 1px seashell;
}

header .content {
  height: 69px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}


header img {
  height: 50px;
  padding-left: 10px;
}

nav a {
  text-decoration: underline;
  color: inherit;
}

@media only screen and (max-width: 600px) {
  #header {
    display: inline-flex;
    flex-direction: column;
  }
}


/* Main Content */

.main-content {
    position: relative;
    padding-top: 69px;  /*To offset for fixed header. */
    justify-content: center;
    width: auto;
  }

/* Mission */

#mission {
  display: flex;
  background-image: url("../Images/img-mission-background.webp");
  height: 700px;
  width: 1200px;
  justify-content: center;
  align-items: center;
}


.mission-content {
  background-color: black;
  width: 1200px;
  padding: 0.05rem;
}


/*Tea of the Month */

#Tea_of_the_Month {
  width: 1000px;
  justify-content: center;
  margin-left: 100px;
  margin-right: 100px;
}

.images-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.image-container img {
  height: 200px;
  width: 300px;
  margin: 10px;
}

@media only screen and (max-width: 600px) {
  #Tea_of_the_Month {
    display: inline-flex;
    flex-direction: column;
  }
}

#locations {
  display: block;
  background-image: url("../Images/img-locations-background.webp");
  height: 500px;
  width: 1200px;
}

#locations h2 {
  padding-top: 5%;
  display: block;
  vertical-align: middle;
}

#locations .locations-container {
display: flex;
justify-content: center;
}

#locations .location-container {
  width: 300px;
  margin-top: 15px;
  margin-left: 40px;
  margin-right: 40px;
  z-index: 100;
  background-color: black;
  opacity: 1;
}

@media only screen and (max-width: 600px) {
  #locations {
    display: inline-flex;
    flex-direction: column;
  }
}

#contact {
  height: 200px;
  margin-top: auto;
  justify-content: center;
  width: 1200px;
}

#footer {
  display: flex;
  justify-content: start;
  padding-left: 20px;
}

Thank you very much for looking at it and for your feedback.

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.