Image disappears as i decrease height in responsive view - html

Question

I have the following:
HTML...
<div className="header">
<div className="container header__container">
<h5>Hello I'm</h5>
<h1>John Doe</h1>
<h5 className="text-light">Software Engineer</h5>
<CTA />
<HeaderSocials />
<div className="me">
<img src={ME} alt="me" />
</div>
<a href="#contact" className='scroll__down'>Scroll Down</a>
</div>
</div>
CSS for the image...
.me {
background: linear-gradient(var(--color-primary), transparent);
width: 22rem;
height: 33rem;
position: absolute;
left: calc(50% - 11rem);
margin-top: 4rem;
border-radius: 12rem 12rem 0 0;
overflow: hidden;
padding: 1rem 3.0rem 1.5rem 1.9rem;
}
CSS in entirety...
.header {
height: 100vh;
padding-top: 7rem;
overflow: hidden;
}
.header__container {
text-align: center;
height: 100%;
position: relative;
}
.cta {
margin-top: 2.5rem;
display: flex;
gap: 1.2rem;
justify-content: center;
}
.header__socials {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.8rem;
position: absolute;
left: 0;
bottom: 15rem;
}
.header__socials::after {
content: "";
width: 1px;
height: 2rem;
background: var(--color-primary);
}
.me {
background: linear-gradient(var(--color-primary), transparent);
width: 22rem;
height: 33rem;
position: absolute;
left: calc(50% - 11rem);
margin-top: 4rem;
border-radius: 12rem 12rem 0 0;
overflow: hidden;
padding: 1rem 3.0rem 1.5rem 1.9rem;
}
.scroll__down {
position: absolute;
right: -2.3rem;
bottom: 18rem;
transform: rotate(90deg);
font-weight: 300;
font-size: 0.9rem
}
/*MEDIA QUERIES (MEDIUM DEVICES)*/
#media screen and (max-width: 1024px) {
.header {
height: 100vh;
}
}
/*MEDIA QUERIES (SMALL DEVICES)*/
#media screen and (max-width: 600px) {
.header{
height: 100vh;
}
.header__socials,
.scroll__down{
display: none;
}
}
The width aspects are pretty responsive and work well enough. But when I adjust the height, the image slowly disappears as I make the height shorter and shorter. All of the other elements in this section/component move along with the height adjustment, but the image does not. Any suggestions?

Answer 1

If you are using CSS classes, you need to replace className by class in your HTML file.
Try this:
.me {
background: linear-gradient(var(--color-primary), transparent);
width: 22rem;
height: 33rem;
position: absolute;
left: calc(50% - 11rem);
margin-top: 4rem;
border-radius: 12rem 12rem 0 0;
overflow: hidden;
padding: 1rem 3.0rem 1.5rem 1.9rem;
}
.me img {
width: 50%;
height: 50%;
max-height: 50vh;
}
<div class="header">
<div class="container header__container">
<h5>Hello I'm</h5>
<h1>John Doe</h1>
<h5 className="text-light">Software Engineer</h5>
<CTA />
<HeaderSocials />
<div class="me">
<img src="https://www.thespruce.com/thmb/7GW0WNhJ5VrLdTJDP7RXJPPbVaY=/4505x2534/smart/filters:no_upscale()/the-most-beautiful-garden-flowers-4690011-7-f6963a3136ee47dba5f85d786b31ac7d.jpg" alt="me" />
</div>
<a href="#contact" className='scroll__down'>Scroll Down</a>
</div>
</div>