Submitted over 3 years ago
HTML CSS Flex basic JavaScript no Mobile section yet
@CodingDatum
Design comparison
SolutionDesign
Solution retrospective
I tried to make the drop-down links a hover state event, but they would rapidly close and open as I scrolled the mouse down. I tried pointer-events: none for the child elements to no avail. Any help would be much appreciated! thanks :-)
Community feedback
- @codeswithrohPosted over 3 years ago
Overall, your site looks good. But there are some things that I didn't liked.
- The horizontal scroll. I think there is no use in it so, better restrict it.
- Its not responsive
- The positioning varies on cross-browser tests.
Some tips:
- Don't give a fixed height to the header or footer because it destroys the responsiveness.
- Don't use large pixel values instead use rem or em because they are much more responsive.
By the way good work, I liked it.
1 - @jorgeflagelPosted over 3 years ago
Hi, I have just read this article from Josh Comeau about transitions. I think it resolves the problem you had with the drop-down link. Check the section about Delays, he uses
.dropdown { opacity: 0; transition: opacity 400ms; transition-delay: 300ms; } .dropdown-wrapper:hover .dropdown { opacity: 1; transition: opacity 100ms; transition-delay: 0ms; }
I think you can adapt the example to your page. I hope it helps.
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