Skip to content
Submitted about 3 years ago

Flexbox

Michael Morrison•500
@mjmorrison10
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social proof section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I believe I need help with the responsive design with the images. It's not 100% circular when on smaller width. Other than that, I think I did a good job?

Any tips for having better code?

Community feedback

  • Mark Mitchell•1,820
    @markup-mitchellPosted about 3 years ago

    Hi Michael,

    The CSS working group draft says:

    "When a box is a flex item, flex is consulted instead of the main size property to determine the main size of the box."

    Therefore your explicit width property is being overridden by the flex-item's default flex-shrink value which

    "determines how much the flex item will shrink relative to the rest of the flex items in the flex container when there isn’t enough space on the row."

    The simplest solution is to add flex-shrink: 0 to your .image class (on the div wrapping the img).

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord