Skip to content
OverviewSolutions
29
Comments
1
ptrwilk
@ptrwilk

All comments

  • eveā€¢230
    @Eve-WangariSubmitted over 1 year ago

    The responsive design works fine, except for the768px break, the cards overflow their container, how can I avoid that.

    Company rating component

    1
    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