3 Column preview card component with little animations
Design comparison
Solution retrospective
Any feedback is welcome!
Community feedback
- @AdrianoEscarabotePosted almost 2 years ago
Hello Arturo Navarro Riveros, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:
I noticed that you used a
button
in which case the best option would be ana
, because in my head when a person clicks on a button written Read more, he is not confirming a form, or something like, it will be redirected to another page, to read more about!to solve this problem do this:
<a href="/">Learn More</a>
To improve the code structure wrap this div:
<div class="attribution">
with the semantic tag
footer
The remainder is excellent.
I hope it's useful. 👍
Marked as helpful0 - @HassiaiPosted almost 2 years ago
@chopinex, how are you. Well done for completing this challenge To make your page responsive, don't use height. give the .vehiculo a padding value and remove the height value in the main To center the content on a page in the body declare the following : body{ min-height-100vh; display: flex; align-items: center; justify-content: center;} or body{ min-height: 100vh; display: grid; place-items:center;} . No need to specify margin for the main . you can add margin: 0 auto to the main Use em and rem as unit for your margin and padding. In the media query , give the body a percentage width: body{ width: 80%} or body{width: 90%} and remove align-content:flex-start. Again remove the height value for the main in the media query and dont give it a margin. In the main you declare display: block; eg: main{ width: 300px ; display: block}. Hope am helpful. Happy coding.
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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