Four Card page using HTML and CSS.

@NasratTalash Yeah I noticed that too, but when I was about to fix it it somehow disappears. I will fix it later, thanks!

@mattstuddert Thank you so much for the feedback! I'll keep that in mind! Truth be told, I'm still a little bit confused regarding min-width and max-width, I'll look more to it today. Once again thank you!

@okawibawa no problem at all. If you ever have any questions please feel free to message me 🙂

@mattstuddert Hi Matt, I'm sorry for the straightforwardness but I have a few questions. If I want to make a section in my page that is equal to the viewport's height, should I use vh? Because I saw in one of your replies where you suggested to avoid vh as possible. Like for example the Four Card Feature page that I made, if I open it on my laptop it becomes scroll-able (vertically), not that it's a bad thing (right?) but it would've been much better if the whole content fits the screen. I did some research but I kind of want to hear your opinion on it. Thanks in advance!

@okawibawa no problem at all! If you want to set a section to 100% the viewport then vh is fine, but it's very rare that you actually want to do that. In the case of this specific challenge, it's OK seeing as it is a single section. But if it were a larger multi-section website you probably wouldn't want/need to use it. I hope that helps!

@mattstuddert Thank you for the quick reply! I also found out a way by setting the HTML height and then set the element height to 100% too, is that a good idea? In the context of responsiveness. I also figured out that if there is some sort of interactions within that element, some of the elements will overflow the viewport’s height. For example the Intro Component challenge, when the state is active, my footer went out of the section and the page becomes scrollable but the image and background color stays the same height as the viewports height. It stresses me out, I definitely do something wrong but I just couldn’t figure it out yet. Once again thank you for responding and sorry for the babbling 😂

@okawibawa for this challenge it would work fine with it being a single section. vh is typically better to use in the very specific instance of wanting the element to be sized based on the viewport. As you've found out, it can be tricky though when working with a responsive website. As the screen size gets smaller and the content gets taller you can run into those overflow issues. That's why I only recommend using it in very specific circumstances and when you know all of the issues that could occur.

@mattstuddert Thank you for the reply. I was struggling really hard at that part. I just uploaded the solution to the Intro Component page, if you have the time please take look into it and then give me your feedback on it. Thank you so much, Matt!