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

Get Help
#1

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:

#2

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.

#3

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

1 Like