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

3-Column Preview Card

P
TM3N 140

@tmen670

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


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

The biggest challenge I faced was trying to make the website responsive. As I shrank the viewport's width, the buttons on the button kept misaligning. I initially used margins below each content but as I shrank the viewport, the paragraph gets longer, thus furthering the margin which pushes the button, causing misalignment. I fixed this using flexbox instead of margins and setting each flex item to a specific height. Now the buttons stay aligned when adjusting viewports.

Community feedback

@ebenezerraph

Posted

This is truly an incredible work you've done here! It looks great!

You might want to work on your mobile view though. The width of the .container is supposed to be fixed, not flexible.

Cheers!

Marked as helpful

1

P
TM3N 140

@tmen670

Posted

Appreciate the advice!

1

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