Design comparison
Solution retrospective
Again with the image is what I struggled with the most. Overflow-hidden belongs on the actual card that was my biggest mistake but luckly I got it. I think something else I have noticed is sizing of divs it looks like the text is close but then when I do it same with same font size my mine is always far away looking.
Community feedback
- @JorggyhPosted about 2 years ago
Well done, some tips:
To increase the distance between the lines, you can add
line-height: 25px;
inside your.subtitle
(25 was an example, test to see what the ideal value is)The mobile version is different, you can create it with media query, add this at the end of your CSS (or create another file) and change it to match the proposed design, and the changes will only change on small screens, on the desktop it will remain the same version you already made.
@media screen and (max-width: 425px) { #card { width: 320px; ... } h1 { ... } /* etc */ }
Marked as helpful2
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