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

Four-cards-feature-section

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


It was not really difficult, the only challenge is the arrangement of the four cards. Anyway, could someone explain me why the team builder and karma image are so big when you don't assign the size to them unlike the others? Any suggestions are welcome.

No fue realmente difícil, el único reto es la disposición de las cuatro tarjetas. de todas formas, alguien me podría explicar porque la imagen de team builder y karma tienen un tamaño tan grande cuando no les asignas el tamaño a diferencia de las demás? Cualquier sugerencia es bienvenida.

Community feedback

Vanza Setia 27,795

@vanzasetia

Posted

Hi, Gastón! 👋

About your question, it is because the parent element of <img src="images/icon-team-builder.svg"> is a flex container. In contrast, the parent element of the calculator icon is not a flex container.

I do not know why flexbox can make the image bigger.

I recommend not making it a flex container. So all of the cards should not be a flex container.

Also, you should not use relative positioning to position the icons. I recommend making each of the icons the background image for the card. I think it would take less code to write.

I hope this helps. Happy coding! 😄

0

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