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 component

Hubert 50

@HubertSzymanski5

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 was quite straightforward project. However I'm not sure if there's a better way to position 'Learn More' button. When shrinking at some point text was hiding under the button. I solved it with switching to mobile view, but I wonder if it can be done better?

Another issue I've found just now is that footer behaves weird when view port width is shrunk to less than 300px: it hides on the right side. No idea why it happens.

Thanks for checking out my solution! Any feedback is welcome!

Have a nice day and happy coding!

Community feedback

@VCarames

Posted

Hey @HubertSzymanski5, some suggestions to improve you code:

  • The car images/icons serve no other purpose than to be decorative; They add no value. Their Alt Tag should left blank and have an aria-hidden=“true” to hides it from assistive technology.

  • The headings are being use incorrectly. The <h1> Heading can only be used ONCE per page. For this challenge, each heading is equally as important. So best option, is to use <h2> Heading, because it will give each card the same level of importance and it's reusable.

  • Your "buttons" were created with the incorrect element. When the user clicks on the button they should directed to a different part of you site. The Anchor Tag will achieve this.

Happy Coding! 👻🎃

Marked as helpful

1
TITOR 340

@hectorestebanm

Posted

Buenas @ HubertSzymanski5 Estuve viendo tu código y podrías probar lo siguiente para que se vea mejor. Dentro de tu body agrega los siguientes códigos: body { flex-direction: column; align-items; min-height: 100vh; }

Con esto todos tus elementos se ubicarán uno encima de otro en forma vertical y estarán centrados en el medio de la pantalla, tanto para la parte móvil cómo para desktop.

Otro consejo, deberías quitar el position: fixed del footer, ya que sino tapará parte de tu diseño. Espero te sirvan estos consejos.

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