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%;
}