Design comparison
Solution retrospective
I had a hard time making the responsive version of the website. While it displays fine for mobile phones and desktop view it does not look good on tablet view screens.
Community feedback
- @correlucasPosted about 2 years ago
👾Hello @voffee, congratulations for your new solution!
😎 I saw your preview site and I liked a lot the work you’ve done here, it's almost complete, I’ve some suggestions you can consider applying to your code:
1.The shadow you've used for the button its too strong, to have a better shadow decrease the shadow
opacity
and create a smooth shadow. See the example of a good shadowbox-shadow: 0px 4px 13px 1px #04110b24;
2.If you’re not familiar to box-shadow you can use this site to create the shadow design and then just drop the code into the CSS: https://html-css-js.com/css/generator/box-shadow/
3.Make the card rounded using
border-radius
andoverflow: hidden
:.container { overflow: hidden; border-radius: 20px; }
✌️ I hope this helps you and happy coding!
Marked as helpful1 - @hyrongennikePosted about 2 years ago
HI,
Good job on the challenge if you make the following change to the body rule the card will be in the center of the page.
body { background: var(--page-color); display: flex; align-items: center; justify-content: center; min-height: 100vh; }
You can also replace the
width: 50%;
width amax-width: 750px
or what you want and on mobile if you make the following change to the card .container the card will stack..container { display: block; margin: 2rem; }
Marked as helpful1
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