HTML AND CSS 3 COLUMN CARD SOLUTION

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome job on this one. Layout in desktop looks great, but the responsive state could be improved and what like Hector said, the mobile layout breaks.

  Some suggestions would be:

  • You don't need to use section for each of the card examples, since those cards or component are all related to one another. If you were to use section, the section element will be wrapping all those cards, since it is a card collection "section".
  • Avoid using multiple h1 on a webpage, always use at least 1 h1 per page. For this one, the h1 would be a screen reader text. This might be new for you, when we say screen-reader text, this just means that the text will only be visible for screen-reader users but not for sighted users. Have a look at Grace's solution for this challenge, inspect the layout and see the usage of h1 as well as the css stylings applied on it. Also take a look of how the layout is structured.
  • The alt for each card img should be left empty like alt="" since those are just decorative images. In an img only acts as a decoration, use alt="" on them, but if the img adds content, then use a meaningful alt value.
  • Those learn more should be using anchor tags a instead of just button.

  CSS

  • On the body tag, avoid using height property with vh unit. This makes the element's height limited to the only remaining viewport/screen's height. Instead, replace it with min-height: 100vh, this takes full viewport and will expand if it needs to.
  • Same goes for the main element, avoid changing the height with vh unit.
  • Lastly, if you did this css that I said, the mobile layout will work now just fine. As an addition, add padding to the left and right side of the body in mobile layout.

  Just those above, still you did a great job on this one.

  Marked as helpful

  0
• 

  Hector Sánchez Coronel•75

  @encoreOaxPosted about 3 years ago

  Hi Samuel! Your desktop solution looks awesome! You really nail it here. Unfortunately the mobile version breaks, I struggle the same way at the beginning. I suggest start with the mobile version first and then go to the desktop, it will help you to see miss matches. Keep it up with you great work!

  Marked as helpful

  0