media query screen height not functioning for image

Question

I am trying to replace a header content when the screen height decreases by removing a large image I have in a div which is basically a logo and placing it as a little logo in the center at the top of the middle of the page only when the screen height goes from 800px and below. Below is the code to give you an idea of what the header container looks like.

Header.jsx

import React from 'react'
import './header.css'
import CTA from './CTA'
import Logo from '../../assets/fts_blacks1.png'
import HeaderSocials from './HeaderSocials'

const Header = () => {
  return (
    <header>
      <div className="container header__container">
        <h5>Welcome To</h5>
        <h1>Favourite Tech Solutions</h1>
        <h5 className="text-light">The Digital Interdependence</h5>
        <CTA />
        <HeaderSocials />
        <div className="me">
          <img src={Logo} alt="Logo" />
        </div>
        <a href="#contact" className='scroll_down'>Scroll me</a>
      </div>
    </header>
  )
}

export default Header

header.css

header{
    /* height: 100vh; */
    padding-top: 7rem;
    overflow: hidden;  
}
.header__container{
    text-align: center;
    height: 100%;
    position: relative;
}

/* cta section */

.cta{
    margin-top: 2.5rem;
    display: flex;
    gap: 1.2rem;
    justify-content: center;
}

/* header socials section */

.header_socials{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    position: absolute;
    left: 0;
    bottom: 3rem;
}
.header_socials::after{
    content: "";
    width: 1px;
    height: 2rem;
    background: var(--color-primary);
}

/* header image section */

.me{
    background: linear-gradient(var(--color-primary), transparent);
    width: 22rem;
    height: 30rem;
    position: absolute;
    left: calc(50% - 11rem);
    margin-top: 4rem;
    border-radius: 12rem 12rem 0 0;
    overflow: hidden;
    padding: 7.5rem 2.5rem 1.5rem 4rem;
}

/* scroll section */

.scroll_down{
    position: absolute;
    right: -2.3rem;
    bottom: 5rem;
    transform: rotate(90deg);
    font-weight: 300;
    font-size: 0.9rem;
}

@media screen and (max-width: 600px){
    .header_socials, 
    .scroll_down{
        display: none;
    }
}

There is nothing in my code to show the media screen height at 800px because I dont know how to go about it that is why I am asking here As you can see above, the image is in a div tag with className = 'me' This is the image i want to take off entirely from that position when the screen height reduces and and place it at the top of the <h1> Favourite Tech Solutions</h1>

Answer 1

Could you update your problem to be a bit more precise? You do not seem to have @media screen and (max-width: 800px) in your css to even target the div you want to remove. Also, I would use Class here instead of className.

Once you do, you could have the following:

@media screen and (max-width: 800px) {
.header__container { 
  display:none;
 }
}