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

Begginer solution to 3-column preview card component.

@mcarpegna

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


This is my solution for the project as a begginer with simple concepts I've being learning. any advice to improve it will be welcome.

Community feedback

@Jorggyh

Posted

Have you noticed that when hovering over the buttons the height of the cards is increasing? this is because the buttons are missing a border, and when you hover the mouse you are adding a border, increasing the size.

One way to fix this is to add border: solid 2px transparent; inside your a, or by setting a height for your container

speaking of container, I consider it unnecessary for you to create a class for main, you can style main directly, for example, instead of doing:

.container {
     display: flex;
     ...
}

you can do

main {
     display: flex;
     ...
}

Apart from these details you did a good job, keep going 🚀

Marked as helpful

0

@mcarpegna

Posted

@Jorggyh hi! I noticed the problem with the buttoms, an had no idea how to fix it. And I'll take the container/main advice. Ty!

0

@marianoz23

Posted

Very good!! Congrats!!!

Marked as helpful

0

Patrick 800

@PPechmann

Posted

Hi @mcarpegna, very nicely done on this challenge, congrats!

You nailed it regarding the desktop size design.

To further improve the solution, I recommend also adding media queries for smaller screen sizes, by just changing the flex-direction to column in this case.

Great job again, keep going :)

Patrick

Marked as helpful

0

@mcarpegna

Posted

Hi @PPechmann. Had no idea about queries because I am starting in this as an autodidact. So I investigated and achieved this goal. Ty for your time, you was very helpfull!

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