@VenusY
Posted
Incredible job on this solution! You've done really well replicating the design, and the website is very responsive.
While playing around with different viewport sizes, I noticed that when the width of the viewport is wide enough to trigger the 1440px media query, it causes scrolling on the page even when the height of the viewport is sufficient to fit all the content + the padding.
This is due to your use of the max() CSS function on the body element.
body {
height: max(1080px, 100vh);
}
This function makes the viewport height 1080px until 100vw exceeds that, in which case, it switches to 100vh. On my monitor, there is scrolling unless I make the page full screen as I have a 1080p monitor. Was this behaviour intended?
@faruqAbdulHakim
Posted
@VenusY Hi Venus,
Thanks for giving me a comment on this solution. Yes, this behavior is intended. The design has a width of 1440px with a height of 1080px. According to my previous solutions, I found that the frontendmentor generates the screenshot using 800px as default. I am not pretty sure if is it true or not (cmiww 😁). That's why I ensure the generated screenshot of my solution looks like the design. 🧐
@VenusY
Posted
@faruqAbdulHakim I see! In that case, ignore my comment, and well done once again for completing the challenge. :)
Although, in my experience, I've noticed that, on challenges where the content is centered, it doesn't matter what height the webpage is set to as long as you've placed the content in the center.
Funnily enough, I've always centered my content using the styles that you used in the 960px media query, so I'm not sure why you're experiencing that issue. 🤔
@faruqAbdulHakim
Posted
@VenusY Thank you. I think I will try to set min-height to 100vh as default again for the next challenges. 🧐
