Responsive css grid

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Greetings, @f5rcbh! 👋

  Good effort on this challenge! It's great that you leave the alt empty for those icons! 👍

  However, there are some areas that can be improved.

  • When I see the site on 481px and then start making the window larger up to 1200px, I notice two issues.
    • First, the cards don't have enough room at 481px. So, adjust the breakpoint of the media query.
    • Second, the buttons start from almost a circle shape and then slowly become a pill shape. There's no need to set width and height on the button elements especially using percentage units. Some padding would be enough.
  • The font family doesn't apply correctly. I'm not sure what caused it. However, try to import the correct font weight based on the style-guide.md.
  • The "Learn More" buttons should be link elements. As a user I would expect after I click it, it will navigate me to another webpage.
  • On mobile landscape view, there are several issues.
    • The attribution sits next to the cards. So, I recommend removing the flex-wrap property.
    • By setting height: 100vh on the body element. It makes it impossible for me to scroll to see content that gets cut off because there is no vertical scrollbar, in other words, the body element isn't growing to fit the content inside it. So, my recommendation is to use min-height instead.

  That's it! Hope you find this useful!

  Marked as helpful

  1

  ---

  

  f5rcbh•190

  @f5rcbhPosted over 2 years ago

  @vanzasetia thanks for your feedback, I will put everything you said on my mind and try to be good 🖤

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @f5rcbh You're welcome! 😄

  0
• 

  Doston Nabotov•950

  @dostonnabotovPosted over 2 years ago

  Hi, there. That looks great. But, I think you have to change the heading's font to 'Big shoulder' (if I am not mistaken). Also, reducing the width of cards can help to match the design even better. Good luck!

  1

  ---

  

  f5rcbh•190

  @f5rcbhPosted over 2 years ago

  @dostonnabotov thank you so much for that 🖤

  0