Submitted over 2 years ago

Responsive 3-column challenge using flex

Tamar• 80

@ttaammaarr

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

3-column preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

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!

Community feedback

Ahmed Bayoumi• 6,740

@Bayoumi-dev

Posted over 2 years ago

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

Tamar• 80

@ttaammaarr

Posted over 2 years ago

@Bayoumi-dev Hi Ahmed,

Thank you so much for the feedback, I will definitely use this in future projects!

If you don't mind, I do have a question. In this case, where all headings are of the same importance, would you use an h1 for the 'Sedans' section and h2 for the 'suvs' and 'luxury'. Or would you use h2 for all 3 of them? I guess the problem then would be that there's no h1 at all..

Thank you for your help!

-Tamar

Akhlak Hossain Jim• 1,325

@Akhlak-Hossain-Jim

Posted over 2 years ago

Nice work. For that you can do:

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

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

and it should always stay in the same position.

Happy coding :)

Marked as helpful

Tamar• 80

@ttaammaarr

Posted over 2 years ago

@Akhlak-Hossain-Jim Hi Akhlak,

Thank you so much for the suggestions! Option 2 worked like a charm on my local device, though not on GitHub pages, I'll definitely look into that further, but you helped me greatly. Thank you!

-Tamar

[edit] Scratch that, it does work! just took some time to load the new page :)

Please log in to post a comment

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