Company rating component

Community feedback

• 

  ptrwilk•420

  @ptrwilkPosted over 1 year ago

  The reason of such behavior is because you have reached the minimum width of the card container. If you open dev tools and start to shrink the window you might notice that its caused by:

  • Img - its fixed width is 80px and will not go beyond this range, by default img width is equal its max width
  • <h3>Anne Wallace</h3>, <p>Verified Buyer</p> - by default they break every word, and each line already contains a single word

  So to make the card container shrink even more, you need to make the img not to have fixed width or to make h3 and p break every letter. It won't look nice but I hope you get an idea.

  To make the img not having fixed width you can add two additional properties into it:

  • max-width: 80px or max-content - it limits upwards so that img does not exceed 80px width
  • width: 100% - this is because by default img width is equal to its default max width, setting it to 100% we tell that from now its width depends on the parent width which is card container, since card container does not have specified width it can shrink to the minimum making the img also shrink with it

  To make h3 and p break every letter you can add word-break: break-all property;

  Please let me know if something is unclear and I will try to explain it better

  Marked as helpful

  1

  ---

  

  eve•230

  @Eve-WangariPosted over 1 year ago

  Perfect. That actually makes sense. I will make the necessary changes. Thank you so much. @ptrwilk

  0