Need Flex guidance on my Tea Cozy Project! Front-End Engineer Path

Hi guys,

I have been working on the Tea Cozy project in the Frontend-Engineer Path. And I have encountered a problem with the responsiveness of the location section.

• I want the div boxes to wrap underneath each other on mobile version.
• The text not to overflow the divs.
• The picture to get extended, so the divs fit when I shrink the screen.

Do I need to use Flexbox and Media queries to achieve this, and how?

I look forward to hearing from you since I have spent so much time on this, and it has been very frustrating, but I want to solve this issue before moving on.

 <!-- Locations section -->

        <section id="Locations">

            <h2 id="locations-header"> Locations</h2>

            <div class="flex-container-boxes">


                <div class="box"> 
                    <h3>Downtown</h3>
                    <p>384 West 4th St</p>
                    <p>Suite 108</p>
                    <p>Portland, Maine</p>
                </div>

                <div class="box"> 
                    <h3>East Bayside</h3>
                    <p>3433 Phisherman's Avenue</p>
                    <p>(Northwest corner)</p>
                    <p>Portland, Maine</p>
                </div>

                <div class="box"> 
                    <h3>Oakdale</h3>
                    <p>515 Crescent Avenue</p>
                    <p>Second Floor</p>
                    <p>Portland Maine</p>
                </div>
            </div>

        </section>
/* Locations section */


#Locations {
    width: 84%;
    height: 500px;
    margin: 50px auto;
    background-image: url(../images/img-locations-background.jpeg);
    background-position-y: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 70px;
    
}

div.flex-container-boxes {
    display: flex;
    flex: 1 1 1050px;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    
    
}


.box {
    background-color: black;
    height: 300px;
    margin: auto 20px auto 20px;
    line-height: 60px;
    opacity: 0.9;
    flex-basis: 30%;
    max-width: 300px;
    padding: 10px;
}
    


#locations-header {
    padding: 15px;
    width: 100%;
}

How the Location section looks now:

How i want the structure to look like:

You could do a media query that kicks in when the site begins to look crowded. Perhaps switching your flex-direction to column would help. You might want to fiddle with the width of the boxes too, but you’ll need to see it first to know how much.

Thank you so much for your feedback. I finally fixed the problem.

1 Like