Submitted over 1 year ago
3-column-preview-card with display flex and display grid
@eliabedasilva
Design comparison
SolutionDesign
Solution retrospective
Give me a feedback
Community feedback
- @fernandolapazPosted over 1 year ago
Hi π, perhaps some of this may interest you:
HTML / ACCESSIBILITY:
- Using more than one
<h1>
is allowed but is not considered a best practice. Maybe it would be better to use <h2> for the types of cars and add an <h1> at the beginning of the page and hide it with CSS for example.
CSS π¨:
- It is better to use
min-height: 100vh;
for the main, as usingheight
causes the page to be cut off in viewports with small height (such as mobile landscape orientation). You can see this in your solution below 500px.
And you will also notice that the <footer> overlaps the card, you can solve it like this:
@media screen and (min-height: 600px) { footer{ position: absolute; top: 96vh; } }
- You might consider using relative units like rem or em since they are better for scalable layouts. Something simple to start with would be to convert to rem (1 rem equals the font size of the root element, 16px by default). Consider this suggestion especially for the
font-size
.
- It might be good to get used to designing with the mobile first approach, which means designing for mobile first and then for desktop or any other device, as it is widely considered best practice.
Please let me know if you want more info on any of these topics or disagree with something. I hope itβs useful : )
Regards,
Marked as helpful0 - Using more than one
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