Estoy tratando de reemplazar el contenido de un encabezado cuando la altura de la pantalla disminuye eliminando una imagen grande que tengo en un div que es básicamente un logotipo y colocándolo como un pequeño logotipo en el centro en la parte superior del medio de la página solo cuando el la altura de la pantalla va desde 800px y menos. A continuación se muestra el código para darle una idea de cómo se ve el contenedor de encabezado.

Encabezado.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

encabezado.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; } }

No hay nada en mi código para mostrar la altura de la pantalla de medios a 800 px porque no sé cómo hacerlo, por eso pregunto aquí . Como puede ver arriba, la imagen está en una etiqueta div con className = 'me' Esto es la imagen que quiero sacar completamente de esa posición cuando la altura de la pantalla se reduce y colocarla en la parte superior de las <h1> Favourite Tech Solutions</h1>