Design comparison
Solution retrospective
Hey All,
Here is my next project. No fixed widths, no heights, first time I didn't actually set the size of the container initially and I made my life much easier! Any comments are welcome.
Cheers,
Dalma
Community feedback
- @MtalafaPosted about 1 year ago
Hi Dalma, -Well done for completing this challenge. -Here are some suggestions. -I noticed that as you hover over the button everything gets a bit bigger because of the border of the button. You can fix this by adding the border to the original state of your button and make it same color as the background. -Another way to fix this is to remove the border from the button:hover and replace it with this:
'box-shadow: inset 0 0 0 2px hsla(0, 0%, 100%, 0.75);'
This will add a shadow inside the button and it will not mess with your spacing. -I also noticed that you did your media queries for 400px max-width. Your design gets messed up before it reaches 400px. I would recommend changing it to 650-700px. -Hope this helps. Minden jot kivanokMarked as helpful0@bdal90Posted 12 months agoHey @Mtalafa,
Thank you for yout remark, I also noticed that, great pieces of advice! Köszönöm! :)
0 - @gfunk77Posted about 1 year ago
Congratulations. Your solution looks great. Very well done. I’d suggest a couple of small things to take your widths and heights a step further:
Use
min-height: 100vh
instead of height. This will ensure that on smaller screens the content doesn’t overflow.Keep in mind that width is 100% by default on block elements.
I hope this helps. Congrats again on your solution.
Marked as helpful0
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