NTF component design using flexbox

Community feedback

• 

  Kristina Radosavljevic•380

  @KristinaRadosavljevicPosted about 2 years ago

  Hi Max! Congrats on completing the challenge, your card looks really good and close to the target design :)

  I did notice one thing that you might want to fix - the overlay on hover on the main image doesn't overlap with the image but is way down, at least on my screen. I assume this is because you used position: fixed; on it, which makes it super hard to adjust to different screen heights.

  The way I did this (maybe there are some other/better ways), is to put the main image and the overlay within the same container, and then you can use position: absolute; on the overlay to position it in relation to the parent element (as opposed to the viewport). This way you can ensure that the overlay is right on top of the image regardless of the screen size. Feel free to take a look at my solution if you need more context.

  Hope this helps, and once again good work! :)

  Marked as helpful

  0
• 

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  Hi Max, congratulations on completing the challenge, great job! 😁

  Some little tips for optimizing your code:

  • Using <hr> for the line is not the best way because this tag have a semantic meaning... in this case use div with border-bottom because this line is decorative
  • also you can use article tag instead of a simple div to the container card for improve the Accessibility
  • remove all unnecessary code, the less you write the better as well as being clearer: for example the section container of image
  • to fix the position of hover effect add top: 1rem and position: absolute to .overlay class and add position: relative ti the father container
  • add transition on the element with hover effect

  Hope this help! Happy coding 😉

  Marked as helpful

  0