Article preview component challenge using flexbox

Community feedback

• 

  Agata Liberska•3,995

  @AgataLiberskaPosted almost 3 years ago

  Hi Rodrigo! I remember having quite a few issues with this challenge too, it's quite a tricky one!

  It's definitely a good idea to make sure your solutions are responsive from the very first challenge you attempt, so nice work here :)

  I see there is an issue with the image in desktop view. The problem is this: your .card div is a flex container, and you've set align-items: center. This is why the height property on the image-wrapper isn't doing much. However, if you change align-items to stretch it will fill up the full height of the div.

  The problem then will be that the image is going to be stretched out, but object-fit: cover on the image should fix it :)

  And when it comes to positioning your popup box - remember that you must set position: relative (or anything other than static) on a parent of the absolutely positioned element - otherwise it will be positioned in relation to the body which is hard to manage :) so if you add this to your .container or the .card, things should be easier!

  Hope this helps :)

  Marked as helpful

  0

  ---

  

  Rodrigo Nascimento•220

  @rodrigovnPosted almost 3 years ago

  @AgataLiberska thank you for the feedback, those remarks will certainly help me to upgrade my work

  0