0
397
ViewsReactJS- spacing issue on mobile and not desktop?
Everything is spaced fine vertically on desktop but on mobile I get a huge gap between two of my lower sections. I think it may be something wrong with my media queries. Here is the site... AstroMojis.io Here is my css style sheet for the section... Could the problem be somewhere else?
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 answers
Answer question0
As far as I can see, you have multiple divs that have the id "home". The extra space is caused by these "home" divs that have a set height of 2900px. The same height remains in mobile.
If you need to keep this static height on mobile, you may reduce it to a point you believe is sufficient. Otherwise, you need to stack the elements on the page and allow them to take up their own height.
You should also not have multiple divs with the same id. Use class or different ids.
The code you posted above is insufficient for debugging because you are not showing the relationship between these styled-components and your application component.