Design comparison
Solution retrospective
πΎ Hello, Frontend Mentor coding community
This is my solution for the Social proof section challenge. TWEAKS π:
Hover effects
π¨βπ¬ Follow me in my journey to finish all challenges (HTML/CSS/JS) to explore solutions that aspires everyone with custom features and tweaks
Ill be happy to hear any feedback and advice!
Community feedback
- @vinumanPosted almost 2 years ago
Hello there,
The design looks awesome and congrats on completing the same.
-
Under your media query, please do increase the max-width value so that the page becomes responsive on medium size screen as well. A max-width of 768px would work well here.
-
Your CSS code quality looks really good. Good luck and happy coding!!
Marked as helpful1@iceberg61Posted almost 2 years ago@vinuman Thanks man... And could you tell me why you choose 768px for the media query.βοΈβοΈ
0@vinumanPosted almost 2 years ago@iceberg61 Hi there, 768px is recommended by Tailwind docs for medium size screens.
https://tailwindcss.com/docs/screens
π
Marked as helpful1@iceberg61Posted almost 2 years ago@vinuman I see I haven't used tailwind before Amma go check it out πβοΈ Peace man
0 -
- @RoanMacmillanPosted almost 2 years ago
Nice one looks good!
I noticed there is an issue when hovering over the buttons; the container seems to grow a bit. You could try this instead:
button { font-weight: 700; border-radius: 30px; color: inherit; border: 2px solid white; padding: 1rem 3rem; background-color: var(--color-Very-light-gray-background-headings-buttons); } button:hover { background-color: inherit; cursor: pointer; color: var(--color-Very-light-gray-background-headings-buttons); }
Marked as helpful1@iceberg61Posted almost 2 years ago@RoanMacmillan Yh I noticed that to....π Will go try it now
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