I am working on a website where I am trying to have an image on the left and a paragraph on the right, but when the screen size is reduced, I need the layout to switch so that the image is at the top and the paragraph is at the bottom.
Even though I have implemented this layout before, it doesn't seem to be working properly this time. I have searched online and looked at other examples, but I can't figure out what the issue is. Can someone assist me with troubleshooting? I'm sure it's a simple fix that I just can't see right now.
Here is the HTML code:
<h1>About</h1>
<div class="wrapper">
<img src="image.jpg" alt="image" id="img-about">
<p id="text-about">Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias perspiciatis asperiores in aliquid repudiandae blanditiis recusandae molestiae nemo itaque inventore velit illum vel voluptatibus, eveniet repellat facilis consectetur veritatis deleniti explicabo ducimus! Debitis numquam unde necessitatibus esse sed. Earum accusamus itaque autem reiciendis aliquam laboriosam sint rem illo explicabo culpa?</p>
</div>And here is the CSS code:
.wrapper {
display: flex;
flex-direction: row;
}
#about-img {
width: 250px;
height: 250px;
border-radius: 50%;
padding: 10px;
margin-right: 15px;
}
#text-about {
font-size: 14px;
margin: auto;
padding: 5px;
}
@media (max-width: 800){
.wrapper {
flex-direction: column;
}
}