Design comparison
Solution retrospective
Was there another way I could have styled the buttons, especially when it came to the hover state?
Community feedback
- @asbhogalPosted over 1 year ago
Hi Jennifer, great job! The designs match the mockups well.
I've just noticed a couple of things that might be worth considering:
- Ideally,
grid
should be used for the columns as this retains the intrinsic value of the elements (ie. keeps the widths consistent.) Becauseflex
permits greater flexibility, your content is being squeezed together and subsequently causing both horizontaloverflow
with the parent container and verticaloverflow
with the child column components between breakpoints695px
and377px
. If you check this in your dev tools you should notice this on your end - Also, it's great you've added the
normalize.css
, however the one by Andy Bell I think is much more up-to-date. Here's a link to it Link - Locally host your Google Fonts for privacy and performance reasons. You can download them from the site, convert them to
.woff2
format, upload them to yoursrc
files then reference them in yourcss
using@font-face
. Here's a great video going through why this is the case and how to achieve it Link - Your
font-size
values should be inrem
for accessibility reasons. Here's a good article explaining why this is the case Link
Hope this helps!
Marked as helpful3@jennifertieuPosted over 1 year agoHi @asbhogal, thank you for taking the time to provide feedback. This is awesome! I didn't think to use grid, but your reasoning makes sense as well as your other comments. I'm going to work on updating the solution, thank you again!
1 - Ideally,
- @MuhaddisRehmanPosted over 1 year ago
For button state you could just add the border on normal state and just change background on hover that way the button won't cause the height difference you get with and without border. A little transition also makes things visually smooth.
.card-button { border: 1px solid var(--very-light-gray); background: var(--very-light-gray); padding: 1rem 2rem; border-radius: 30px; cursor: pointer; color: inherit; transition: all 0.3s ease; } .card-button:hover { background: inherit; }```
Marked as helpful1@jennifertieuPosted over 1 year ago@MuhaddisRehman good idea, I'll try that! Thank you so much for the feedback!
1
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