Design comparison
Solution retrospective
Feedback welcome. Not sure how to solve the padding.
Currently working on the desktop version. In mobile preview it works fine :)
Community feedback
- @SecreSwalowtailPosted almost 2 years ago
Nice work Rasmus,
There are some things you can try:
- Setting the min-height of the body to 100vh will allow the background to fill the whole screen
- Setting the display of the body to flex . This will allow you to center the card on the screen using align-items and justify-content
- You can use border-radius on the image to give it a border similar to the card
- To make the card scale nicely on higher resolutions you can set a max-width to the card. Play around with the values until you are satisfied (try 400px and go from there)
Marked as helpful1@Visceral89Posted almost 2 years ago@SecreSwalowtail Thanks so much for the feedback! I think i fixed everything now :D
I probably submitted a solution a bit too early, looked at it like something I could do while I was working on it.
0 - @obengkennethPosted almost 2 years ago
Your image could use some rounded corners. Please try the border-radius property.
Marked as helpful1@Visceral89Posted almost 2 years ago@obengkenneth Hi, yes. I wasnt sure if I was supposed to submit a sollution as soon as i had a workable site. Continuing work on it as I go :) But thanks for the suggestion, easy to miss in the design.
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