Stats Preview Card - CSS Grid and Linear-gradient

Community feedback

• 

  Yasmine•700

  @Yasmine10Posted over 2 years ago

  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!

  1

  ---

  

  Pon Huang•210

  @ponhuangPosted over 2 years ago

  @Yasmine10 Hello, Yasmine Thank you so much, I didn't realize the accessibility issues 😅 and thanks for telling me the other way to make the blend color. I didn't know this one. Learn it now, thanks a lot 🙏🏻

  BTW, I was checking your solution, I love the way you share by using flex direction to reverse the order. That's amazing!💛

  0
• 

  P

  Kent O'Sullivan•1,870

  @12KentosPosted over 2 years ago

  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!

  1

  ---

  

  Pon Huang•210

  @ponhuangPosted over 2 years ago

  @12Kentos Hi, Kent Thank you so much for these advices, I would love to try it in the next challenge :)

  In the past, I learned to use [ margin: 0 auto; ] to make it in center. Didn't even consider flexbox, but yeah, this is definitely a good way to try. Thank you 🙏🏻

  0