Latest solutions
IP Tracker using Nuxt, SASS, and Tailwind
#nuxt#sass/scss#vue#tailwind-cssSubmitted about 2 years agoFylo solution with draggable range input
#accessibility#bem#sass/scss#animationSubmitted over 2 years ago
Latest comments
- P@danielmrz-dev@9CB5
As someone who has done a similar solution I understand the hardships!
It looks very cool but be careful with browser support when it comes to input ranges. For example if you view your solution in Firefox the gradient doesn't exist and the slider thumb is not circular.
Marked as helpful - @Aaryn-Robinson@9CB5
In your media query, you have the following class:
.navbar{ display: none; }
This code above is the reason why your mobile menu isn't showing. Replacing it to
display: block
should fix it.Hope this helps.
Marked as helpful - @siva-krish45@9CB5
I have used an input range in my solution for this challenge and you can view it by looking at my profile.
I found it surprising how difficult it is to style an input range. There's no easy way to create a gradient trail and I had to resort to writing some hacky JS code to match the design. It also renders differently on different browsers so you'll have to style for each browser individually.
- @arifaisal123@9CB5
This might sound dumb but have you checked the width of your mobile? Your phone might be wide enough that it's not triggering the mobile view. I just checked your website on my phone (Pixel 6 Pro) and it is showing the mobile view.
Marked as helpful - @Spioutzw@9CB5
Great solution! The search works perfectly, but I think it would be better if you could search for an IP by pressing the "Enter" key to save some time.
Happy coding 😊
Marked as helpful - @JustANipple@9CB5
Great work. It almost matches the design perfectly!
As for your question, the code in your nav isn't that bad. There's naturally going to be a lot more code than a typical nav since this one has multiple dropdowns with lots of children inside. But you can really trim down your markup if you use a front-end framework like Vue for example and using list rendering with
v-for
for the dropdowns. You may also use tailwind to reduce code in your stylesheet.Going through your solution, I have noticed a few minor issues which I will highlight below:
- The animation takes too long on the dropdowns and the fact that it starts off fast then slows down makes it feel clunky. You should aim to minimise waiting times for better UX.
- The layout breaks on some screen widths. For example, when viewed on the iPad mini (768px), the header has a white gap on the right hand side, and on the surface duo (540px) some images are off-centered and there are some overlapping elements.
Marked as helpful