3 column preview card component with HTML and CSS

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 2 years ago

  Greetings, Kristina225! 👋

  Good job on this challenge! 👏 Your solution looks pretty good! 😀

  Like Melwyn mentioned, it would be worth switching to a mobile layout a little sooner in your solution so that the height of the card doesn't increase dramatically and the content inside look rather squished shortly before the layout changes from desktop to mobile.

  Another tip—it's generally recommended that you only use one <h1> tag per page (since that's better for semantics and SEO). I think the headings in this challenge would be fine as <h2> or <h3>. 😉

  Hope that helps. 🙂

  Keep coding (and happy coding, too)! 😁

  Marked as helpful

  1

  ---

  

  Kristina225•260

  @Kristina225Posted over 2 years ago

  @ApplePieGiraffe thnak you so much for taking the time to review my solution. :) I was just reading about adding breakpoints. My content here starts to break somewhere at round 750px, so I will one there and change the size of the container, and maybe another one before the mobile layout. I've never done this before, so it will be a good for practice. It makes sense for the <h1> tag. I will change that as well. Thank you again and happy coding to you too! :)

  1
• 

  Melwyn•250

  @melwyntPosted over 2 years ago

  Hello Kristina,

  The desktop version is nicely done.

  However you might want to check again the responsiveness for the mobile version. I think there is an issue with the height of the container or card because the site is partially truncated. A media query with the correct pixel width will most likely resolve this.

  Happy coding!

  Marked as helpful

  1

  ---

  

  Kristina225•260

  @Kristina225Posted over 2 years ago

  @melwynt thanks for taking the time to look at my solution. :) You're right about the responsiveness. I discovered a bunch of other problems with my code for small screens. With the margins, the border radius, the overflow... I'm reading up on media-queries now and will fix my code. Thanks again and happy coding to you too!

  0
• 

  Wendy•1,990

  @wendyhamelPosted over 2 years ago

  Hi, your desktop solution looks great! Very much like the design. The mobile version needs some more attention I think.You can't scroll the page, so the other cards can not be viewed. You also need to adjust the rounded corners. For example; in your solution the right upper corner of the first card is not rounded on mobile.

  Have fun improving and with other challenges!

  Marked as helpful

  0

  ---

  

  Kristina225•260

  @Kristina225Posted over 2 years ago

  @wendyhamel thank you so much for reviewing my solution. :) I saw all of the problems you mentioned when I look at my mobile design. I didn't pay enough attention to that. I will fix it and set additional breakpoints in my code. Have a wonderful day and good luck with the other challenges to you too!

  0