Help! Stuck on Tea Cozy Project!

Projects Skill Path Projects
1

Hello!! I’ve gotten pretty much to the end of the tea cozy project, but there are two things that don’t look quite right to me.

1) In the Main section where it says “Our Mission”, the text is in the wrong place, isn’t really centered?, and it seems like the background is extending too far. I have no idea where I’m going wrong here…I’ve looked through most of the forum posts and still can’t find the error. Any help would be much appreciated! (code below)

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

/*--Main--*/

.mission-container {
    background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg?_gl=1*1rws6em*_ga*NjY2NDQwOTgyOC4xNjcxNTM5NTMy*_ga_3LRZM6TM9L*MTY5MDQ1MzIyNy4xMjkuMS4xNjkwNDUzMjYzLjAuMC4w);
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.7;
    height: 700px;
    width: 1200px;;
    margin: 40px auto 40px auto;
    display: flex;
}

h2.our-mission, h4.our-mission {
    background-color: #000;
    color: seashell;
    text-align: center;
    vertical-align: middle;
    width: 1200px;
    padding: 15px;
    margin: 0px;
    position: relative;
    top: 300px;
}

.our-mission {
    align-items: center;
}

2) in my “Locations” section, the text overflows out the bottom in the “East Bayside” and “Oakdale” text boxes when I shrink the browser, and I’m trying to figure out which flexbox property to use and I can’t quite figure it out.

 <!--Locations-->
    <div id="locations">
    </div>
  <div class="banner">
    <div class="locations-title">
      <h2>Locations</h2>
    </div>

      <div class="location-box-container">
        <div class="location-box">
            <h4>Downtown</h4>
            <p>384 West 4th St</p>
            <p>Suite 108</p>
            <p>Portland, Maine</p>
        </div>

        <div class="location-box">
          <h4>East Bayside</h4>
          <p>3433 Phisherman's Avenue</p>
          <p>(Northwest Corner)</p>
          <p>Portland, Maine</p>
      </div>

      <div class="location-box">
        <h4>Oakdale</h4>
        <p>515 Crescent Avenue</p>
        <p>Second floor</p>
        <p>Portland, Maine</p>
      </div>
    </div>
   </div>

/*--Locations--*/

.banner {
    background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg?_gl=1*1wd9lbp*_ga*NjY2NDQwOTgyOC4xNjcxNTM5NTMy*_ga_3LRZM6TM9L*MTY5MDk5MjU1OS4xMzkuMC4xNjkwOTkyNTU5LjAuMC4w);
    background-repeat: no-repeat;
    background-position: center;
    height: 500px;
    width: 100%;
    margin: 40px auto auto auto;
    padding-top: 85px;
}

.location-box-container {
    width: 70%;
    margin: 15px auto auto auto;
    display: flex;
    justify-content: space-between;
}

.location-box {
    background-color: #000;
    padding: 15px;
    height: 250px;
    flex-basis: auto;
    margin-bottom: auto;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: auto;
    min-height: 0;
    }

Thank you in advance for all of your assistance!!

2

Hey there,

You are declaring a fixed width for the header container, and the headings. Let it grow and shrink depending on the screen size by removing width: 1200px from each. I can’t see the full file, so if you need to make it expand you can change the width to 100%.

The container is a flex container, but the default direction is row. Switch to column and your headings will display on top of each other, instead of side-by-side.

You will probably have to apply the background-size property to the container as well. Check out which one would work for you here: background-size - CSS: Cascading Style Sheets | MDN

For the locations section, I think you’ll need to upload the full site to Github and publish on Github pages so we can see what is actually happening!

3

Hey @jameskeezer ,

My header (Our Mission) container is planted on the left and still too short. I’m definitely still missing something, but not sure what it is.

To your second point, I’ve uploaded the site to GitHub, linked below. Thanks for any insight you can provide!

4

Also- Thank you for your response! Meant to include that in my previous reply!

5

You’re welcome!

Lots of things going on here.

.mission-container is not required. Your #mission div is already a flex container. Set the flex direction to column, then you just need to tell it what to do with the flex items, which are the h2 and h4 tags.

Remember that if you want to center vertically with a “column” flex container, you use justify-content and not align-items.

I suggest you give #mission the following:

display: flex;
flex-direction: column;
justify-content: center;

And then remove ALL of the CSS properties from h2.our-mission and h4.our-mission. You should have the headings aligned in the center vertically and horizontally, and you can build from there.