Skip to content
Submitted about 3 years ago

Responsive 3-column challenge using flex

Tamar•80
@ttaammaarr
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Is there a way to align all buttons to be at the same vertical position? The paragraphs contain a different amount of words, when resizing the browser, this causes some alignment issues with the buttons. Any tips or advice is appreciated!

Code

Please log in to post a comment

Log in

Community feedback

  • Ahmed Bayoumi•6,680
    @Bayoumi-dev

    Hey Tamar, It looks good!...

    My suggestion:

    • Using more than one <h1> is allowed by the HTML specification, but is not considered a best practice. Using only one <h1> is beneficial for screenreader users.

    ---> Multiple <h1> elements on one page

    Hope this help!... Keep coding👍

    Marked as helpful
  • Akhlak Hossain Jim•1,325
    @Akhlak-Hossain-Jim

    Nice work. For that you can do:

    1. set a fixed bottom padding,
    2. take a div with display: flex; for p and the button and
    3. make flex-direction: column; justify-content: space-between;

    or

    1. in section add display: flex; flex-direction: column;,
    2. select img and add width:64px;height:auto;
    3. in button add margin-top:auto;

    and it should always stay in the same position.

    Happy coding :)

    Marked as helpful

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