I am relatively new to the world of HTML and CSS, and I am encountering a specific challenge with CSS.
My goal is to design a section that looks like this:
---Image---
--Text--
---Image---
--Text--
---Image---
--Text--
---Image---
--Text--
The main issue I'm facing is that when I try to set a background color for the rectangle containing the text, it ends up encompassing all the content below it.
.lower-part {
margin-top: 15%;
}
.lower-part .row .image img {
height: 80%;
width: 80%;
}
.lower-part .row .textbox {
background-color: red;
}<div class="lower-part">
<div class="row">
<div class="image"><img src="images/BadmintonPicture.svg" alt="Badminton Picture"></div>
<div class="textbox1">
Sports.
<p>For me, nothing is better than regular exercise. It keeps me energetic throughout the day.</p>
<div class="row">
<div class="image"><img src="images/CookingPicture.svg" alt="Cooking Picture"></div>
<div class="textbox">
Cooking.
<p>I LOVE Food. I try to experiment with new recipes whenever I can. The Food Lab by Kenji Lopéz-Alt helps me be a better cook.</p>
<div class="row">
<div class="image"><img src="images/ReadingPicture.svg" alt="Reading Picture"></div>
<div class="textbox">
Reading.
<p> I love self-development books because they help me grow as a person.
<span>Favorites:</span>
<br>Slight Edge, Atomic Habits, How to Win Friends & Influence People .
</p>
<div class="row">
<div class="image"><img src="images/GuitarPicture.svg" alt="Guitar Picture"></div>
<div class="textbox">
Music.
<p>I grew up playing the violin but the guitar seemed way cooler. So I stuck with that for the most part. Also, I like to sing every few minutes.</p>
</div>
</div>
</div>Sass
.lower-part {
margin-top: 15%;
.row {
.image {
img {
height: 80%;
width: 80%;
}
}
.textbox {
background-color: red;
}
}
}