Tea Cozy Project - items wrapping outside container driving me nuts!

Hello all:

I am working on the Tea Cozy project and although I can get it to work (with tremendous struggles), it has one issue which I cannot resolve.

Namely - the location boxes at the bottom overlap the location

container and overflow into the contact
making the whole thing look like a mess on small screens.
I have no idea why it is doing this as I recycled the code for the “featured tea” section which doesnt have similar issues. I did set some elements to block from flex as it refused to fit within the container otherwise.

I’ll fully admit that I struggled to understand the intricacies of flex box so any advice would be appreciated!

HTML here - apologies for relative filepaths

<!DOCTYPE html>
<html>
<head>
  <title>The Tea Cozy</title>
  <link rel="stylesheet" href="style.css" type="text/css" />
</head>
  <body>
    <header class = "header">
        <img id="logo-img" src="./Resources/img-tea-cozy-logo.webp">
        <nav>
            <ul class = "navigation">
                <li><a href="#mission">Mission</a></li>
                <li><a href="#featured-tea">Featured Tea</a></li>
                <li><a href="#locations">Locations</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="mission" class="flex-container">
            <div class="content">
                <h2> Mission</h2>
                <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
            </div>    
        </section>

        <section id="featured-tea" class="flex-container">
            <div class="content">
                <h2> Tea of the month</h2>
                <h4>What's Steeping at the Tea Cozy?</h4>
                <div id="store-container" class="flex-container">
                    <div class ="item">
                        <img src="./Resources/img-berryblitz.webp">
                        <span>Fall Berry Blitz Tea</span>
                    </div>
                    <div class ="item">
                        <img src="./Resources/img-spiced-rum.webp">
                        <span>Spiced Rum Tea</span>
                    </div>
                    <div class ="item">
                        <img src="./Resources/img-donut.webp">
                        <span>Seasonal Donuts</span>
                    </div>
                    <div class ="item">
                        <img src="./Resources/img-myrtle-ave.webp">
                        <span>Myrtle Ave Tea</span>
                    </div>
                    <div class ="item">
                        <img src="./Resources/img-bedford-bizarre.webp">
                        <span>Bedford Bizarre Tea</span>
                    </div>
                </div>
            </div>    
        </section>

        <section id="locations" class="flex-container">
            <div class="content">
                <h2>Locations</h2>
                <div id="location-container" class="flex-container">
                    <div id="downtown" class ="location-box">
                        <h3>Downtown</h3>
                        <p>384 West 4th St</p>
                        <p>Suite 108</p>
                        <p>Portland, Maine</p>
                    </div>
                    <div id="east-bayside" class ="location-box">
                        <h3>East Bayside</h3>
                        <p>3433 Phisherman's Avenue</p>
                        <p>(Northwest Corner)</p>
                        <p>Portland, Maine</p>
                    </div>
                    <div id="oakdale" class ="location-box">
                        <h3>Oakdale</h3>
                        <p>515 Crescent Avenue</p>
                        <p>Second Floor</p>
                        <p>Portland, Maine</p>
                    </div>
                </div>
            </div>
        </section>

        <section id="contact" class="flex-container">
            <div class="content">
                <h2> The Tea Cozy</h2>
                <h5>contact@theteacozy.com</h5>
                <h5>917-555-8904</h5>
            </div>
        </section>
        
    </main>
    <footer>
        <h5>copyright The Tea Cozy 2017</h5>
    </footer>
  </body>
</html>

CSS here:

body{
    margin: 0;
    font-family: "Helvetica", sans-serif;
    font-size: 22px;
    color: seashell;
    background-color: black;
    opacity: 0.9;
    text-align: center;
}

a {
    color: seashell;
    font-family: "Helvetica", sans-serif;
    font-size: 22px;
}

h2,
h3,
h4 {
    margin: 0;
    padding: 10px;
}

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

header img {
    height: 50px;
    padding-left:10px;
}

nav {
    text-align:right;
    flex-grow: 1;
}

.navigation li {
    display: inline-block;
    padding-right: 20px;
  }


ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
} 

main {
    margin-top: 70px;
}

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

#mission{

    height: 700px;
    background-image: url('./Resources/img-mission-background.webp');
    background-repeat: no-repeat;
    background-position: center;
    align-items: center;
}

#mission .content{
    width: 100%;
    background-color: black;
    padding: 0;
    margin: 0;
}

.item{
    padding: 10px;
}

.item img{
    height: 200px;
    width: 300px;
    display: block;
}

.item span{
    display:block;
    margin-top: 10px;
    font-weight: bold;
}

#locations {
    padding-top: 70px;
    height: 500px;
    background-image: url('./Resources/img-locations-background.webp');
    background-repeat: no-repeat;
    background-position: center;
    align-items: center;
    display: block;
}

#locations .flex-container {
    flex-basis: 1200px;
    margin: auto;

}

.location-box {
    background-color: black;
    margin: 5px 10px;
    padding: 10px;
    opacity: 1;
    flex-basis: 280px;
    flex-direction: column;
    justify-content: center;

}

#contact {
    display: block;
    margin-top: 70px;
}

footer{
    width: 100%;
    text-align: left;
    margin-left: 20px;
}

Thanks so much!

1 Like

I have similar issues here and yet to find a solution to it. I hope someone more experienced will pull through for us.

My guess would be the height property for locations. By hardcoding it to 500px, your location boxes may actually need more space than they are given. You may want to set it to auto so it will scale to be as long as it needs to be.

#locations {
    padding-top: 70px;
    height: 500px;
}
2 Likes

Thank you! I was trying to follow the spec but maybe it would be better if I used min-height instead of height to avoid this issue.

1 Like

Did that fix it? The 500px probably works for a desktop view though. But then again, desktop and mobile often have different specs.

1 Like

Yes it did! Thanks so much!

1 Like