Skip to content
Submitted about 3 years ago

3 column Preview Card - CSS flex box

Pon Huang•210
@ponhuang
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Does anyone know why the button text didn't just take its space as it need?

I did set the display to inline-block, but when I inspect them in Chrome dev, still can see the text is not working as inline-block. No idea why it happens like this, or is there anything I missed or made mistake?

Thanks 🙏🏻

Code

Please log in to post a comment

Log in

Community feedback

  • Pradeep Saini•990
    @pradeeps4ini

    Hi, Pon Huang. How are you?

    Your button width is not what you want because it is inheriting width from the parent element. You should change the button width to a value you want. In the design of the project, buttons width seems to be around 140px or 150px.

  • Matt V.•10
    @mv805

    You should be using a <button> element for all buttons, not <a>, <div> or anything else simulating button functionality. Then the text will be nice and centered by default.

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