Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
7
Comments
24

Chris

@9CB5United Kingdom520 points

front-end > back-end

Latest solutions

  • Responsive multi-step form made with Nuxt and SASS

    #nuxt#vue#sass/scss

    Chris•520
    Submitted over 1 year ago

    0 comments
  • IP Tracker using Nuxt, SASS, and Tailwind

    #nuxt#sass/scss#vue#tailwind-css

    Chris•520
    Submitted about 2 years ago

    0 comments
  • Fylo solution with draggable range input

    #accessibility#bem#sass/scss#animation

    Chris•520
    Submitted over 2 years ago

    0 comments
  • Blogr landing page solution

    #animation#bem#sass/scss#accessibility

    Chris•520
    Submitted over 2 years ago

    1 comment
  • Responsive summary card using only tailwind

    #tailwind-css

    Chris•520
    Submitted over 2 years ago

    0 comments
  • Responsive page using flexbox, SASS with BEM


    Chris•520
    Submitted over 2 years ago

    0 comments
View more solutions

Latest comments

  • P
    Daniel 🛸•44,810
    @danielmrz-dev
    Submitted over 1 year ago

    Fylo Data Storage built with SASS and Tailwind

    #accessibility#sass/scss#tailwind-css#lighthouse
    1
    Chris•520
    @9CB5
    Posted over 1 year ago

    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•130
    @Aaryn-Robinson
    Submitted about 2 years ago

    EasyBank Landing Page

    1
    Chris•520
    @9CB5
    Posted about 2 years ago

    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 RAMA KRISHNAN S•140
    @siva-krish45
    Submitted about 2 years ago

    fylo data storage component

    #accessibility
    1
    Chris•520
    @9CB5
    Posted about 2 years ago

    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.

  • Arif Faisal•580
    @arifaisal123
    Submitted about 2 years ago

    Results Summary Component Using HTML & Sass

    #sass/scss#accessibility
    1
    Chris•520
    @9CB5
    Posted about 2 years ago

    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
  • Roquigny Matthieu•70
    @Spioutzw
    Submitted about 2 years ago

    ip tracker

    #next#react#material-ui
    1
    Chris•520
    @9CB5
    Posted about 2 years ago

    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
  • Sam•1,190
    @JustANipple
    Submitted about 2 years ago

    🚀Blogr-landing-page | SASS | JS animations | Mobile-first workflow🚀

    #animation#sass/scss
    2
    Chris•520
    @9CB5
    Posted about 2 years ago

    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
View more comments
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub