Submitted 5 months ago

3 Column Responsive Card Using CSS Flex

Nafis Sazzad Niloy•190

@methane-js

A solution to the 3-column preview card component challenge

Preview Code

Solution retrospective

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

I am proud because I have successfully created a Responsive Project

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

I encountered the challenge to make the website responsive in mobile design.

But when I fixed the height of html and body at 125%, it easily solved

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

In mobile design, I have encountered that the upper side of the card vanishes completely, But when I set the height of html and body to 125%, it was solved.

Please let me know, if you have a better way to solve this

Code

Please log in to post a comment

Community feedback

Marzia Jalili•8,410
@MarziaJalili
Posted 5 months ago
Awesome!

Some tips to consider in your projects
- First, while your code is generally well-structured, consider using more semantic HTML elements. For example, you could use <section> for each card.
- Second, using grid for centering is more simple than flex:
```
body {
  display: grid;
  place-items: center;
}
```
- Also, using px for font-size is not really considered good practice. It turns out that using px causes some issues. I suggest you use rem unites instead.
The solution looks great overall, keep up the grind.

😎😎😎

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