When viewing on a phone screen, it should resemble the screenshot linked below: Image
In the screenshot, the specific row and column that I am referring to is highlighted in black. Interestingly, when I deactivate the "width" of the row, it functions correctly. The screenshot with the "width" set as normal can be seen below:
This is my HTML
<div class="about-content-container">
<div class="row my-row g-0">
<div class="col-sm-12 col-md-12 col-lg-6 d-flex justify-content-center">
<img src="/images/Typing-bro.svg" alt="">
</div>
...
My CSS
@media (max-width: 390px) {
.main-column:nth-child(2) {
margin-top: -2rem;
}
.person-img {
height: 90%;
width: 95%;
}
.about-me {
margin-top: 0rem;
}
/* What I do section */
.about-desc {
width: 80%;
text-align: center;
}
}
Also, an issue I'm facing is that when I set the width of "row>*" to 0, everything disappears. Any help would be greatly appreciated! I've been struggling to solve this issue for quite some time now. Thank you!