I have unintentional scroll down
hi like the title said i have a scroll down which i dont want on my landing page ,the issue is i dont know where it came from i set the body height to be 100dvh ?
https://ilyas-draissia.github.io/huddle-landing-page-with-single-introductory-section-master/
9 Replies
This is intended behavior
If the content is larger than the screen it will scroll
You can try to reduce the image size, font sizes, spacings, and moving the social media links in the top header - if you want everything to fit in 1 screen without scrolling
do i need to set fixed size for image?
Yea I'd set a
max-width on mobile
Is suggested for all screen sizes. Keeps it contained on mobile and prevents it from getting to large on desktop and potentially pixelating
I meant moreso for mobile since there's scrolling on mobile, partly because the image is too big so its causing vertical scroll (not horizontal)
Yellow is
Red is
bodyRed is
.container
White is .main__image and .main__info
body is set to display: flex, min-height: 100dvh .
container is set to display: flex, height: 100%
image div is set to min-width: 58% and actually the img is max-width: 100%
Reduce font sizes & paddings, remove the
min-width: 58% on the image container, and you should be on your way to making it 1 screen
Beck is right you don't need something like a
max-width: 300px like i was thinking for mobile just a max-width: 100% like you already have is good. You also have a height: 5rem on the footer, I'd remove thatthe best i came up with https://ilyas-draissia.github.io/huddle-landing-page-with-single-introductory-section-master/
@vince