Design comparison
Solution retrospective
I had some problems with the dev tools and the responsive option, so I don't know if the responsive is right :c
Community feedback
- @MiculinoPosted almost 3 years ago
Hey @jhonGriGi, thanks for sharing your solution with us!
I had a look at your final solution and here are my suggestions:
-
Reduce the card's dimension just a tiny bit
-
Add a
box-shadow
as the one shown in the original design -
Consider using
background-image
property for the two images or you can also use::after
and::before
pseudo-classes -
Use Flexbox display to vertically and horizontally center your design
display: flex;
align-items: center
justify-content: center
min-height: 100vh
should all be applied to thebody
element -
There's a huge amount of space on smaller screen sizes that creates horizontal and vertical scrolling. That's due to how the current layout is setup. You have to make some changes to how you position and align items in your page to make sure your design is also responsive
Hope these suggestions will be useful. Keep up the good work!
Marked as helpful1@jhonGriGiPosted almost 3 years ago@Remus432 Thanks for your comment, I'll keep that in mind in the next challenges :3
0 -
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