Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

column-preview-card-component-main

Yous 170

@yousra10

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi everyone,

I just completed the challenge. I use Flexbox. I am not yet totally feeling comfortably with it. Can you please tell me if there is some points that I should improve?

With a huge thanks thanks!!

Happy coding !!

Community feedback

@tesla-ambassador

Posted

Hey Yous. Congratulations on completing this challenge! You really put in the work 💪 Here's a few things you might want to consider.

  • The webiste is not responsive. You might want to change the flex-direction property to column to your container div at a screen width of around 650px and use a width of percentage on you container. (width: 80%;). This will make your solution responsive and viewable across different screen widths.
  • On your buttons, you don't need to wrap the button text in a span, you just place it between the button tags in this manner <button>text</button> Therefore when one hovers over the button, you can add the property color: white; and the button text will turn white. So one won't have to hover specifically at the text for it to turn white. Happy coding and keep on coding.

Marked as helpful

0

Yous 170

@yousra10

Posted

@tesla-ambassador Thank you so much for your suggestions! It's very helpfull !

2

Please log in to post a comment

Log in with GitHub
Discord logo

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