Design comparison
Solution retrospective
please suggest for better practices. how I improve my code and coding style.
Community feedback
- @rinsterPosted over 1 year ago
Great job on completing the challenge!
Alternatively, you can switch what svgs/imgs to be shown on the screen using media queries. Add the classes to the html element and add another media query break point for desktop. The below is for mobile:
@media screen and (max-width: 374px) { .desktop { display: none; // hide it } .mobile { display: block; // show it } }
I also recommend disabling
:hover
on mobile device view. This is the general practice since you can't hover on a mobile device. A code sample below:@media(hover: hover) { button:hover { color: hsl(150, 100%, 66%); box-shadow: 0px 0px 26px rgba(82, 255, 168, .9); padding: 20px; } } /**Remove hover on mobile screens*/ @media(hover: none) { button:hover, button:active {border: 1px solid rgba(82, 255, 168, .9)} }
Marked as helpful0 - @lack21Posted over 1 year ago
Good job 👍, but I have some recommendations!
-
Replace whole
.divider
class withimg
, you don't needsvg
here since there's normal image for thathttps://lack21.github.io/Advice-Generator/images/pattern-divider-desktop.svg
and addwidth: 100%
when you replace it. -
Instead of
width: 40%
in the id#root
replace it withwidth: min(30rem, 90%)
, like this it will be responsive on desktop and mobile.
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