Submitted about 1 month ago

Responsive Four elements using flexbox

kristinakasalova• 90

@kristinakasalova

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

This is a solution for...

Four card feature section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm glad I managed the cards to look relatively similar to the preview. I optimised for 2 sizes, mobile and desktop, however in future I would like to re-do it in a way that the design looks good on tablet or semi-large screens, i.e. changes to 2 column as opposed to currently showing 3 which is not as nice as I would like to.

What challenges did you encounter, and how did you overcome them?

While I thought this would be just another simple challenge that would cement my CSS knowledge, I actually had a moderately hard time trying to figure out how to make all the images, texts and titles in the correct position. I ended up using flexbox styles, since all the other attempts failed.

What specific areas of your project would you like help with?

I struggled with keeping the card titles within card borders when changing screen size. When shrinking the screen, the cards get proportionally smaller while the title gets pushed up outside the upper border. I'm not sure how to stop it and only keep the title within the card lines.

Community feedback

haquanq ®️• 1,585

@haquanq

Posted about 1 month ago

Hello @kristinakasalova 👋

Here is my feedback on how you can improve your solution:

About keeping card titles within borders, you need to make the text break when meeting the border by specifying word-break: break-word as the only element overflowing the card is the paragraph.
You should also consider using display: grid instead of display: flex to manipulate a grid of items, it is much more robust and convenient.
Consider using more semantic markups instead of div (avoid using div when ever possible, i will explain later) such as section, article, figure,... .For example, you can choose section or article to wrap the card (depend on what context you want to provide - is it a section or article?).

If you want, you can check out my solution for this challenge for more references.

Have a nice day and happy coding! 🕺🕺🕺🕺🕺🕺🕺

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