I want to display two divs side by side and be responsive so that when the screen is resized one div goes under another instead of squeezing side by side on small screens. and both to be centered on their own side of the screen. (Sorry if I am being too demanding I am new to this divs stuff.)
<h1 class="w3-xxlarge" style="text-align: center;">What we are dedicated to</h1>
<br>
<div class="imagetxt w3-animate-left">
<img src='../pic/globe-icon.svg' width="400" height="300" alt='Picture of the world'>
<p>
AYLUS Orlando Florida, is dedicated to helping improve the world we live in without
people helping the earth, the environment's problems will aggravate more and more.
We also help clean, refurbish, and repair parks, roads, trails, and anything that we
commonly use so other people can enjoy their surroundings more by cleaning up animals
will also benefit.
</p>
<img src='../pic/helping-hand-icon-png-23.png' width="400" height="300" alt='Helping hand picture'>
<p>
We are furthermore dedicated to helping the lives of the poor and needy. By opening
drives that collect material that goes to nonprofit organizations, we can help people
who are in need and victims of a natural disaster. By doing this, we can save countless
lives from hunger, medical issues, and prevent poverty.
</p>
<img src='../pic/leader.png' width="400" height="300" alt='leadership picture'>
<p>
Aut dolor aspernatur cupiditate repudiandae eos accusantium inventore molestiae sequi
earum perspiciatis qui odio minima magni, iste fugit reiciendis atque tenetur quaerat
itaque incidunt, consequuntur esse. Accusantium doloribus odit debitis.
</p>
</div>
<br>
<div>
<p class="w3-xxlarge" style="color: grey; text-align: center;">Our Leaders</p>
<p class="w3-large" style="color: grey; text-align: center;">Click next to start then scroll down</p>
<div class="review">
<div class="review__items">
<img src="../pic/memberpics/IMG_0849.jpeg" />
<h1>Dylan</h1>
<p>
Dyan is the president of the AYLUS Orlando, FL foundation.
<br><br>
"Get to work - Dyan"
<p>
</div>
<div class="review__items">
<img src="../pic/memberpics/IMG_2025.jpeg" />
<h1>Kevin</h1>
<p>
Kevin is the secretary of the AYLUS Orlando, FL foundation.
<br><br>
"I'm going to go play Clash Royale - Kevin"
<p>
</div>
<div class="review__items">
<img src="../pic/memberpics/IMG_0793.jpeg" />
<h1>Nikolas</h1>
<p>
Nikolas is a vice president of the AYLUS Orlando, FL foundation.
<br><br>
"Pull that dead tree away - Nikolas"
</p>
</div>
<div class="review__items">
<img src="../pic/memberpics/IMG_0013.jpeg" />
<h1>Max</h1>
<p>
Max is the second vice president of the AYLUS Orlando, FL foundation.
<br><br>
"I can't come - Max"
</p>
</div>
<div class="review__button">
<button id="prev" onclick="previousReview()">
PREV
</button>
<button id="next" onclick="nextReview()">
NEXT
</button>
</div>
</div>
</div>
img {
max-width: 100%;
height: auto;
}
.imagetxt {
display: grid;
padding: 2rem;
grid-template-columns: 300px 1fr;
gap: 1rem;
align-items: center;
max-width: 800px;
margin: 0 auto;
font: 500 100%/1.5 system-ui;
}
.imagetxt img {
max-width: 100%;
height: auto;
}
@media (max-width: 650px) {
.imagetxt {
display: block;
font-size: 80%;
}
.imagetxt p {
position: relative;
margin: -3rem 0 2rem 1rem;
padding: 1rem;
background: rgba(155, 155, 155, 0.664);
}
}
.review {
background: rgb(255,149,0);
background: linear-gradient(90deg, rgba(255,149,0,1) 0%, rgba(231,92,48,1) 51%, rgba(221,68,68,1) 100%);
height: auto;
width: 270px;
border-radius: 15px;
margin: auto;
padding: 10px;
margin-top: 30px;
align-items: center;
}
.review:hover {
box-shadow: 2px 2px 2px black;
}
.review__items {
align-items: center;
justify-content: space-evenly;
width: 250px;
padding: 10px;
align-items: center;
}
.review__items img {
height: auto;
width: 250px;
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 4px 15px;
}
.review__items h1 {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 20px;
}
.review__items p {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
}
.review__button {
text-align: center;
padding: 10px;
}
.review__button button {
color: rgb(192, 229, 192);
background: #dd4444;
font-weight: bold;
border: none;
padding: 10px;
cursor: pointer;
}
.review__items {
display: none;
}
