Tea Cozy Project - SHRINK PROBLEM

Hello!
I think I’ve practically completed the Tea Cozy Project, but I have an issue when shrinking the page. As you can see, everything looks correct, but when shrinking some of the parts overlap others and it looks like the second image.
I can’t seem to spot my mistake, can you please help me?
Thanks in advance!

HTML

<!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 href="./styles.css" rel="stylesheet">
</head>

<body>

     <!--Navigation Bar-->
    <header>
        <!--LOGO-->
        <img class="logo" src="IMAGES\tea-cozy-logo.png" alt="Logo of Tea Cozy">
        <nav>
            <!--Section Menu-->
            <a href="#mission">Mission</a>
            <a href="#featuredtea">Featured Tea</a>
            <a href="#locations">Locations</a>
        </nav>
    </header>

    <!--Main Body-->
    <main>
        <!--Mission section-->
        <section class="flex-container" id="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>
        <!--Tea of the Month section-->
        <section id="featuredtea">
            <h2>Tea of the Month</h2>
            <h4>What's Steeping at The Tea Cozy?</h4>
            <div class="flex-container">
                <figure>
                    <img src="IMAGES\berryblitz.jpg" alt="Fall Berry Blitz Tea">
                    <figcaption>Fall Berry Blitz Tea</figcaption>
                </figure>
                <figure>
                    <img src="IMAGES\spiced-rum.jpg" alt="Spiced Rum Tea">
                    <figcaption>Spiced Rum Tea</figcaption>
                </figure>
                <figure>
                    <img src="IMAGES\donut.jpg" alt="Seasonal Donuts">
                    <figcaption>Seasonal Donuts</figcaption>
                </figure>
                <figure>
                    <img src="IMAGES\myrtle-ave.jpg" alt="Myrtle Ave Tea">
                    <figcaption>Myrtle Ave Tea</figcaption>
                </figure>
                <figure>
                    <img src="IMAGES\bedford-bizarre.jpg" alt="Bedford Bizarre Tea">
                    <figcaption>Bedford Bizzare Tea</figcaption>
                </figure>
            </div>
        </section>  

        <!--Locations section-->
        <section id="locations">
            <h2>Locations</h2>
            <div class="flex-container diff-locations">
                <div class="location">
                    <h3>Downtown</h3>
                    <p>384 West 4t St</p>
                    <p>Suite 108</p>
                    <p>Portland, Maine</p>
                </div>  
                <div class="location">
                    <h3>East Bayside</h3>
                    <p>3433 Phisherman's Avenue</p>
                    <p>(Northwest Corner)</p>
                    <p>Portland, Maine</p>
                </div>
                <div class="location">    
                    <h3>Oakdale</h3>
                    <p>515 Crescent Avenue</p>
                    <p>Second Flor</p>
                    <p>Portland, Maine</p>  
                </div>
            </div>
        </section>
    </main>

    <!--Footer Section-->
    <section id="contact">
        <h2>The Tea Cozy</h2>
        <h5>[email protected]</h5>
        <h5>917-555-8904</h5>
    </section>
    <footer>
        <h5>copyright The Tea Cozy 2017</h5>
    </footer>

</body>
</html>

CSS

body {
    background-color: black;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    color: seashell;
    opacity: 0.7;
    text-align: center;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}


/*Navigation Bar*/

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

.logo {
    max-height: 50px;
    padding-left: 10px;
}

nav a {
    color: seashell;
    text-decoration: underline;
    padding: 20px 10px;
}    

/*Main Body*/ 

main {
    width: 100%;
}

/*Mission section*/

#mission {
    background-image: url('IMAGES/mission-background.jpg');
    background-repeat: no-repeat;
    background-position: center;
    height: 700px;
}

.mission-text {
    margin: auto;
    background-color: black;
    width: 100%;
}

/*Tea of the Month section*/

#featuredtea {
    max-width: 1200px;
    height: 700px;
    margin: auto;
}

figure img{
    height: 200px;
    width: 300px;
    margin-bottom: 10px;
}

figcaption {
    font-weight: bold;
}

/*Locations section*/

#locations {
    background-image: url('IMAGES/locations-background.jpg');
    background-repeat: no-repeat;
    background-position: center;
    height: 500px;
    padding-top: 70px;
}

.diff-locations {
    margin: auto;
    max-width: 1200px;
}

.location {
    background-color: black;
    width: 300px;
    opacity: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 15px 40px;
}

/*Footer Section*/

#contact {
    height: 200px;
}

footer {
    text-align: left;
    padding-left: 20px;
}

Hi there!

Welcome to the forums!

If we look at your CSS, you are using fixed heights. Because of this, when your flexed children wrap, the height required to exist within their parent is higher than their parent’s height, causing overflow. If the fixed heights are removed, the parent height can grow as needed—no overflow.

I hope this helps. :slight_smile:

If you require any further explanation, please feel free to ask!

Perfect!

Thank you :slight_smile:

1 Like

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