Mobil First BEM

Community feedback

• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  Hey Alfonso, nice work on this challenge! Here are some answers to your questions:

  1. For the desktop image, you could add object-fit: cover; and object-position: center left; to the img element. Because you've set a height and width on the element, this will ensure the image maintains its aspect ratio (doesn't get squashed) and is anchored to the left of the image. You can then reduce the width of the .card__picture element and you'll see that it will crop the image to get it looking like the design.
  2. For the tooltip in this design, I would just create an element with rounded corners. I would then use a ::before pseudo-element to create a triangle and use position: absolute; to stick it to the bottom. You can use a CSS Triangle Generator to create the triangle code easily.
  3. You could add/remove an .active class to the icon when it's clicked to show its current state using JS.

  I hope these tips help. If you've got any more questions please feel free to ask! 🙂

  1

  ---

  

  Alfonso Vargas•135

  @alfonsovgsPosted over 4 years ago

  @mattstuddert Thanks Matt 😄

  I'm going to try these tips. 😎💻

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  @alfonsovgs you're welcome! Let me know how it goes 👍

  0

  

  Alfonso Vargas•135

  @alfonsovgsPosted over 4 years ago

  @mattstuddert Hello Matt, I just finished the fix of the position for the image, I followed your tips. I'm going to continue with the Tooltip I still have no idea yet but I will try it.

  Thanks a lot 😎

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  @alfonsovgs no problem! Good luck with the tooltip. Are you in the Slack community? That's the best place to get help if you get stuck on it 👍

  0