Tea Cozy Project - FInished but need help when resizing screen

Hi! I just finished the Tea Cozy Project

My solution looks quite similar I think, BUT when I resize the screen its not responsive. Also, in the Locations section, I could not get the margins between the image and the Locations title as specified.

Here is my code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tea Cozy</title>
    <link rel="stylesheet" type="text/css" href="./styles.css">
</head>

<body>
    <header>
        <img class="logo" src="./images/img-tea-cozy-logo.png">
        <nav>
            <ul>
                <li>Mission</li>
                <li>Featured Tea</li>
                <li>Locations</li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="mission">
            <div class="mission-text">
                <h2>Our Mission</h2>
                <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade,
                    Organic Tea</h4>
            </div>
        </section>
        <section class="tea-of-the-month">
            <h2>Tea of the Month</h2>
            <h4>What's Steeping at The Tea Cozy?</h4>
            <div class="tea-types">
                <div class="tea berryblitz">
                    <img src="./images/img-berryblitz.jpg" alt="Fall Berry Blitz Tea">
                    <h4>Fall Berry Blitz Tea</h4>
                </div>
                <div class="tea spicedrum">
                    <img src="images/img-spiced-rum.jpg" alt="Spiced Rum Tea">
                    <h4>Spiced Rum Tea</h4>
                </div>
                <div class="tea donuts">
                    <img src="./images/img-donut.jpg" alt="Seasonal Donuts">
                    <h4>Seasonal Donuts</h4>
                </div>
                <div class="tea myrtleave">
                    <img src="./images/img-myrtle-ave.jpg" alt="Myrtle Ave Tea">
                    <h4>Myrtle Ave Tea</h4>
                </div>
                <div class="tea bedford">
                    <img src="./images/img-bedford-bizarre.jpg" alt="Bedford Bizarre Tea">
                    <h4>Bedford Bizarre Tea</h4>
                </div>
            </div>

        </section>
        <section class="locations">
            <h2>Locations</h2>
            <div class="adresses-container">
                <div class="address downtown">
                    <h3>Downtown</h3>
                    <p>384 West 4th St</p>
                    <p>Suite 108</p>
                    <p>Portland, Maine</p>
                </div>
                <div class="address east-bayside">
                    <h3>East Bayside</h3>
                    <p>3433 Phisherman's Avenue</p>
                    <p>(Northwest Corner)</p>
                    <p>Portland, Maine</p>
                </div>
                <div class="address oakdale">
                    <h3>Oakdale</h3>
                    <p>515 Crescent Avenue</p>
                    <p>Second Floor</p>
                    <p>Portland, Maine</p>
                </div>
            </div>
        </section>
        <footer>
            <div class="company-info">
                <h2>The Tea Cozy</h2>
                <h5>contact@theteacozy.com</h5>
                <h5>917-555-8904</h5>
            </div>
            <h5 class="copyright">copyright The Tea Cozy 2017</h5>
        </footer>
    </main>

</body>

</html>

and the CSS

body {
    font-family: Helvetica;
    font-size: 22px;
    color: seashell;
    background-color: black;
    opacity: 0.9;
    display: block;
    width: 100%;
}

header {
    background-color: black;
    position: fixed;
    display: inline-flex;
    border-bottom: 1px solid seashell;
    justify-content: space-between;
    width: 100%;  
    height: 69px;
    top: 0;
}

main {
    text-align: center;
}

li {
    list-style: none;
    text-decoration: underline;
    display: inline-block;
    padding-right: 5px;
    margin: 0 10px;
}

.logo {
    height: 50px;
    position: relative;
    margin: 10px 10px;
    padding: 0 auto;
}

.mission {
    background-image: url("./images/img-mission-background.jpg");
    height: 700px;
    width: 1200px;
    align-content: center;
    justify-content: center;
    display: inline-flex;
    align-items: center;
}
   
div.mission-text {
    background-color: black;
    width: 100%;
}

.tea-of-the-month {
    width: 1000px;
    margin: auto; 
}

.tea-types div {
    display: inline-flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: space-around;
}

.tea-of-the-month img{
    height: 200px;
    width: 300px;
    padding: 0 auto;
    margin: 0 auto;
}
.tea {
    margin: 10px;
}

.locations {
    background-image: url("./images/img-locations-background.jpg");
    height: 500px;
    width: 1200px;
    margin: 0 auto;
    padding: 0 auto;
    display: inline-block;
    color: rgba(255,255,255, 0.9);
    flex-direction: row;
    align-items: center;
}

 .adresses-container {
    align-items: center;
    justify-content: center;
    display: inline-flex;
 }

 .address {
     background-color: black ; 
     width: 300px;
     margin-right: 40px;
     margin-top: 15px;
     align-items: center;
     justify-content: center;
 }

.company-info {
    height: 200px;
}

 .copyright {
     text-align: left;
     padding-left: 20px;
 }

You use almost exclusively px definitions in your sizing attributes; not generally considered responsive design.

You’ll want to refactor using percentages, or media queries, or both.

Hi! Thanks for your answer! Apparently I skipped a whole section of the syllabus regarding Responsive design.

I have a related question… if the design specifics on the project to copy say, for example, 1000px width for a certain container, or give specific px measurements, how does a developer interpret those measurements to %, for a responsive design?

Thanks in advance! I’m a newbie here!

If, in your original display size, the width of the container is 1000px, and the width of the parent is 4000px, you would be able to refactor your 1000px reference to say 25% (which is functionally the same). A good formula to use is target / context.

This StackOverflow answer provides additional details.

1 Like

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