Cozy Tea Project

Hi there.

https://www.codecademy.com/paths/web-development/tracks/getting-more-advanced-with-design/modules/layout-with-flexbox/projects/tea-cozy

I am trying to format the images in the Tea of the month section to display like this.

My code currently looks like this:
HTML

    <h2>Tea of the Month</h2>

    <p>What's Steeping at The Tea Cozy?</p>

    <div class="container1" id = "row">

        <div  class = "teaPic" >

            <img src="images\img-berryblitz.jpg">

            <h4>Fall Berry Blitz Tea</h4>

        </div>

        <div  class = "teaPic" >

            <img src="images\img-spiced-rum.jpg">

            <h4>Spiced Rum Tea</h4>

        </div>

        <div  class = "teaPic" >

            <img src="images\img-donut.jpg">

            <h4>Seasonal Donuts</h4>

        </div>

        <div  class = "teaPic" >

            <img src="images\img-myrtle-ave.jpg">

            <h4>Myrtle Ave Tea</h4>

        </div>

        <div  class = "teaPic" >

            <img src="images\img-bedford-bizarre.jpg">

            <h4>Bedford Bizarre Tea</h4>

        </div>

    </div>

</section>

CSS:

.container1 {

display: flex;

flex-wrap: wrap;

justify-content: center;

}

.teaPic {

display: flex;

height: 200px;

width: 300px;

padding: 10px;

margin: auto;

}

currently being rendered like this??

You are currently setting the height and width of the .teaPic div container, but not of the images themselves. As such it’s shrinking the container but not the image and you’re losing a lot of the image. You need to set the height and width for the images too, either individually through the img tags, or universally using CSS pointing to the img tags.

1 Like

Thanks very much!

Sometimes it needs an extra pair of eyes :).

Follow up question… the images are now on a separate line with the h4’s next to it.
Any idea how to format them so they’re the same as in the first pic?

I’m still trying to get my head around this Flexbox stuff

Css currently looks like:

.container1 {

display: flex;

flex-wrap: wrap;

justify-content: center;

}

.teaPic {

display: flex;

height: auto;

width: 1000px;

padding: 10px;

margin: auto;

}

.teaPic img {

height: 200px;

width: 300px;

}

What you’ll need to do is give the container for the images a width, so .container1 needs a width, so say for testing sake width: 1000px. Then you would give it the property align-content: space-between and this should arrange your images in such a way that it uses all the space evenly like that. Then play around with the width of the container to get it looking how you would like!

2 Likes

thanks dude, appreciate it

1 Like