Teacozy project

Hi There!

I am struggling a little bit in the “Our Mission” part of the project. I have decide to use flexbox, but I can´t figured out to position the h4 tag <h4>Our Mission</h4> in one line and the rest of the other text on the bottom line. I´ve tried to use flex-grow for the h4 tag but the other elements will not below… Any hints please…

Hi, I would really recommend for debugging this kind of thing to change the background of your content boxes to see how they’re interacting and make good use of your browser’s inspect element tools.

If you’re using Firefox, look out for this button that lets you point and click at each element:
Screen Shot 2020-10-25 at 5.30.21 PM

If you need further help debugging I would recommend sharing the code on github and maybe some screenshots of your debugging attempt.

Thank you I am keep trying, if I get stuck I post the code on github…but here is the code:

            <div class="ourmission"><h2>Our Mission</h2></div>

            <div><h4>Handpicked,</h4></div>

            <div><h4>Artisanaly Curated,</h4></div>

            <div><h4>Free range,</h4></div>

            <div><h4>Sustainable,</h4></div>

            <div><h4>Small Batch,</h4></div>

            <div><h4>Fair Trade</h4></div>

            <div><h4>Organic Tea</h4></div>

            

        </div>

and my css:

.mission {

background-color: #000;

height: 100px;

color: seashell;

display: flex;

justify-content: center;

align-items: center;

flex-flow: row wrap;

align-content: space-around;

font-family: Helvetica;

}

Did you try debugging first? How did that go? What observations did you make?

Here’s a link to flexbox documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

I am almost completed this project, but I have several issues regarding position of my elements, and I am struggling to come right: On the Tea of The Month section, my figcaption of my fourth flex-item is not below the item and my 4th flex-item is slightly above (not aligned):


My html code for this part

    <div class="centered-text">
        <h2>Tea of the Month</h2>
        <p>What´s Steeping at The Tea Cozy?</p>
    </div>
    <div class="tea-products">
        <figure>
            <img class="tea-items" src="/images/img-berryblitz.webp"  alt="fall">
            <figcaption><h4>Fall Berry Blitz Tea</h4></figcaption>
        </figure>
        <figure>
            <img class="tea-items" src="/images/img-spiced-rum.webp"  alt="spiced">
            <figcaption><h4>Spiced Rum Tea</h4></figcaption>
        </figure>
        <figure>
            <img class="tea-items" src="/images/img-donut.webp" alt="donuts">
            <figcaption><h4>Seasonal Donuts</h4></figcaption>
        </figure>
        <figure>
        </figure>
            <img class="tea-items" src="/images/img-myrtle-ave.webp" alt="ave">
            <figcaption><h4>Myrtle Ave Tea</h4></figcaption>
        </figure>
        <figure>
            <img class="tea-items" src="/images/img-bedford-bizarre.webp" alt="bedford">
            <figcaption><h4>Bedford Bizarre tea</h4></figcaption>
        </figure>
    </div>
</div>

and my css:

/* MIDDLE-CONTENT */

.middle-content {
width: 1200px;
height: 500px;
margin: 0 auto;

text-align: center;

}

/* BOTTOM-MIDDLE-CONTENT */

.tea-products {
background-color: #000;
width: 1000px;
height: 500px;
margin: 0 auto;
padding-top: 60px;
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
align-content: center;
}

.tea-items {
width: 300px;
height: 200px;
padding: 10px;
}

figcaption {

font-family: helvetica;
color: seashell;
padding-top: 10px;

}

On the locations section the background-image does not fit entirely in the divcontainer, although the code I used background-image: url(/images/img-locations-background.webp); and
background-size: cover; apparently its fine.

any help is appreciated, my entire code is on: