0
400
VistasReactJS: ¿problema de espaciado en dispositivos móviles y no en computadoras de escritorio?
Todo está bien espaciado verticalmente en el escritorio, pero en el móvil tengo una gran brecha entre dos de mis secciones inferiores. Creo que puede haber algún problema con mis consultas de medios. Aquí está el sitio... AstroMojis.io Aquí está mi hoja de estilo css para la sección... ¿Podría estar el problema en otro lado?
import styled from 'styled-components'; import { MdKeyboardArrowRight, MdArrowForward } from 'react-icons/md'; export const HeroContainer = styled.div` background: #fff; display: flex; justify-content: center; align-items: center; padding: 0 10px; height: 2900px; position: relative; z-index: 1; :before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: -webkit-gradient( linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2)) ), } `; export const HeroBg = styled.div` position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; overflow: hidden; `; export const VideoBg = styled.video` width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; background: #232a34; position: absolute; `; export const HeroContent = styled.div` z-index: 3; max-width: 1200px; max-height: 100%; position: absolute; padding: 10px 0px; display: flex; flex-direction: column; align-items: center; `; export const HeroH1 = styled.h1` color: #fff; font-size: 46px; text-align: center; @media screen and (max-width: 768px) { font-size: 40px; } @media screen and (max-width: 480px) { font-size: 32px; } `; export const HeroP = styled.p` margin-top: 24px; color: #fff; font-size: 24px; text-align: center; max-width: 600px; font-family: Helvetica, sans-serif; @media screen and (max-width: 768px) { font-size: 24px; } @media screen and (max-width: 480px) { font-size: 18px; } `; export const HeroP2 = styled.p` margin-top: 24px; color: #fff; font-size: 18px; text-align: center; max-width: 600px; font-family: Helvetica, sans-serif; @media screen and (max-width: 768px) { font-size: 24px; } @media screen and (max-width: 480px) { font-size: 18px; } `; export const HeroBtnWrapper = styled.div` margin-top: 32px; display: flex; flex-direction: column; align-items: center; `; export const ArrowForward = styled(MdArrowForward)` margin-left: 8px; font-size: 20px; `; export const ArrowRight = styled(MdKeyboardArrowRight)` margin-left: 8px; font-size: 20px; `;1 Respuestas
Responde la pregunta0
Por lo que puedo ver, tienes múltiples divs que tienen la identificación "inicio". El espacio extra es causado por estos divs "hogares" que tienen una altura establecida de 2900px. La misma altura se mantiene en el móvil.
Si necesita mantener esta altura estática en dispositivos móviles, puede reducirla hasta un punto que considere suficiente. De lo contrario, debe apilar los elementos en la página y dejar que ocupen su propia altura.
Tampoco debe tener múltiples divs con la misma identificación. Utilice la clase o identificaciones diferentes.
El código que publicó anteriormente es insuficiente para la depuración porque no muestra la relación entre estos componentes con estilo y el componente de su aplicación.