Getting so cozy with tea that I'm stuck

Projects Personal Projects
#1

Hi. I am having a problem sizing my photos correctly. The first part of the website renders correctly, but I seem to be unable to size the 5 photos to a l x w of 200px x 300px. They are of varying sizes, and it’s making the site look weird. Here is the code:

HTML…

<!DOCTYPE html>
<html>
    <head>
        <title>Tea Cozy</title>
        <link href="./tea-cozy.css" type="text/css" rel="stylesheet">
    </head>

    <body>
        <header class="header">
            <img class="logo" name="logo" 
            src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-tea-cozy-logo.png">
            <ul class="headerList">
                <li class="mission">Mission</li>
                <li class="featuredTea">Featured Tea</li>
                <li class="locations">Locations</li>
            </ul>
        </header>

        <section class="background">
            <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-mission-background.jpg">
            <div class="missionStatement">
                <h2>Our Mission</h2>
                <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
            </div>
        </section>

        <section class="monthlyTea">
            <h2>Tea of the Month</h2>
            <h4>What's Steeping at The Tea Cozy?</h4>
            
            <figure id="berryBlitz">
                <img src="./Tea Cozy Berry Blitz.jpg">
                <figcaption id="blitzCaption">Fall Berry Blitz Tea</figcaption>
            </figure>
            
            <figure id="spicedRum">
                <img src="./Tea Cozy Spiced Rum.jpg">
                <figcaption id="rumCaption">Spiced Rum Tea</figcaption>
            </figure>

            <figure id="seasonalDonuts">
                <img src="./Tea Cozy Donut.jpg">
                <figcaption id="donutCaption">Seasonal Donuts</figcaption>
            </figure>

            <figure id="myrtleAve">
                <img src="./Tea Cozy Myrtle Ave.jpg">
                <figcaption id="myrtleAveCaption">Myrtle Ave Tea</figcaption>
            </figure>

            <figure id="bedfordBizarre">
                <img src="./Tea Cozy Bedford Bizzare.jpg">
                <figcaption id="bedfordBizarreCaption">Bedford Bizarre Tea</figcaption>
            </figure>

        </section>
    </body>
</html>

and the CSS…

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

header {
    height: 69px;
    width: 100%;
    border-bottom: 1px solid seashell;
    position: fixed;
    background-color: black;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    align-items: center;
    z-index: 2;
}

.logo {
    display: inline-flex;
    flex-direction: row;
    height: 50px;
}

.headerList {
    text-decoration: underline;
    display: inline-flex;
    list-style-type: none;
    padding-right: 20px;
}

.mission, .featuredTea, .locations {
    display: inline-flex;
    flex-direction: row;
    padding: 10px;
}

.background {
    height: 700px;
    width: 1200px;
    margin: 0 auto;
    position: relative;
    top: 70px;
    z-index: 1;
}

.missionStatement {
    background-color: black;
    position: absolute;
    top: 300px;
    width: 1200px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.monthlyTea {
    display: block;
    width: 1000px;
    top: 900px;
}

#berryBlitz, #spicedRum, #seasonalDonuts, #myrtleAve, #bedfordBizarre {
    display: inline-flex;
    flex-flow: row wrap;
    height: 200px;
    width: 300px;
    margin: 10px;
}

Any help would be greatly appreciated. Thank you.

#2

A little update… Maybe it’s better if I put the pictures in the HTML files, instead of the ones I downloaded to my computer. Still the same problem, though. Here’s the code for the HTML, updated:

<!DOCTYPE html>
<html>
    <head>
        <title>Tea Cozy</title>
        <link href="./tea-cozy.css" type="text/css" rel="stylesheet">
    </head>

    <body>
        <header class="header">
            <img class="logo" name="logo" 
            src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-tea-cozy-logo.png">
            <ul class="headerList">
                <li class="mission">Mission</li>
                <li class="featuredTea">Featured Tea</li>
                <li class="locations">Locations</li>
            </ul>
        </header>

        <section class="background">
            <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-mission-background.jpg">
            <div class="missionStatement">
                <h2>Our Mission</h2>
                <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
            </div>
        </section>

        <section class="monthlyTea">
            <h2>Tea of the Month</h2>
            <h4>What's Steeping at The Tea Cozy?</h4>
            
            <figure id="berryBlitz">
                <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-berryblitz.jpg">
                <figcaption id="blitzCaption">Fall Berry Blitz Tea</figcaption>
            </figure>
            
            <figure id="spicedRum">
                <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-spiced-rum.jpg">
                <figcaption id="rumCaption">Spiced Rum Tea</figcaption>
            </figure>

            <figure id="seasonalDonuts">
                <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-donut.jpg">
                <figcaption id="donutCaption">Seasonal Donuts</figcaption>
            </figure>

            <figure id="myrtleAve">
                <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-myrtle-ave.jpg">
                <figcaption id="myrtleAveCaption">Myrtle Ave Tea</figcaption>
            </figure>

            <figure id="bedfordBizarre">
                <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-bedford-bizarre.jpg">
                <figcaption id="bedfordBizarreCaption">Bedford Bizarre Tea</figcaption>
            </figure>

        </section>
    </body>
</html>
#3

Hi,

The issue here is that the images are loading at its original size and it’s not shrinking according to the rules set for each figure.

What you need to do is set the images width to 100% so that it fits each figure as specified.

You could either select all images in the of that section by selecting with the class: .monthlyTea img or you could specify with each figures id: #berryBlitz img, #spicedRum img, #seasonalDonuts img, #myrtleAve img, #bedfordBizarre img

*You need to specifically target the images otherwise other images on the site could get effected

2 Likes
#4

zainabrawat is correct. give each figure its own id

1 Like