Card with hover effects, flexbox

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @Hatchino, Congratulations on completing this challenge!

  👨‍💻 Here are some tips to improve your solution code:

  1.Fix the component responsiveness, its not working yet and this is due the fixed width you've applied to the container. The difference between width and max-width is that the first(width) is fixed and the second(max-width) is flexible and make the element shrink when the screen starts to scale down. So if you want a responsive block element, never use width choose or min-width or max-width.

  2.The image is not responsive yet, a quick way to make any image responsive and respecting the container size is to add display: block and max-width: 100% to the <img> selector. To improve the responsiveness even more adding the auto-crop property you can add object-fit: cover to make the image crop inside the container its inside.

  img {
      display: block;
      object-fit: cover;
      max-width: 100%;
  }
  

  ✌️ I hope this helps you and happy coding!

  0

  ---

  

  Lea•160

  @HatchinoPosted about 2 years ago

  Thank you @correlucas, I fixed the responsive component, it is true that I have the annoying habit of putting fixed widths.

  Happy coding too !

  1

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @Hatchino You're welcome Lea, than say me if works and If was useful for you! Have a good night.

  0

  

  Lea•160

  @HatchinoPosted about 2 years ago

  Hello @correlucas, I noticed a mistake at the top right and bottom left border. I have no idea how to fix it.

  0