Stats Preview Card - CSS Grid and Linear-gradient

Hi 👋 In my opinion there's nothing wrong with a fixed height on the content container.

I saw you have some accessibility issues that need fixing:

• Heading levels should only increase by one: for accessibility it's important that the headings are in a logical order so it's best to change your <h5> to <h2>
• All page content should be contained by landmarks: to fix this you need to surround your attribution in the html with <footer>

Also if you want the overlay of the image to be more similar to the design you could do the following:

background-color: #aa5cdb;
background-image: url("images/image-header-desktop.jpg");
background-size: cover;
background-blend-mode: multiply;
opacity: 0.75; 

Hope this helps!

Hey @ponhuang,

Nice job on the challenge it looks great!

Yes normally you would want to let the container define it's own height, based on the elements inside of it. However there are times where you will want a fixed height like you used. One thing I noticed is that you used height and width instead of max-height and max-width or min-height and min-width I would suggest in the future, trying to use those instead as they are more responsive, and allow your page to automatically grow/shrink as the page is resized.

Also a good way to get your project centered on the screen is to add the following code to your body element.

display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh;

Keep up the great work!