Skip to content
Submitted about 3 years ago

HTML/CSS Menu responsive to desktop and mobile only (Some Bootstrap)

Aidan Wright•30
@greasypicadillo
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

First time submitting a solution and I know there are TONS of problems. My code is messy and overcomplicated first of all. Secondly the site could be more responsive (I only made it work on 1440px and 375px as a patch-job) Forgive me. It was my first challenge and I was very tired. Oh also my card and background sizing seem a bit off.

Please be gentle, I am very new but even I can see there's about a million and one things wrong with how I did this.

Appreciate concise and constructive criticism on how to logically take next steps to avoid this mess on future projects. Thanks so much!!

Community feedback

  • Patryk Besler•355
    @beslerpatrykPosted about 3 years ago

    Just chill Aidan 😎 You are doing more than fine

    Try getting rid of width: 30% property on your #maincard element. This will make it nice and responsive on most of the displays.

    The markup looks solid. I would recommend you using classes instead of id's to target your elements when styling. Also, read about the mobile-first approach.

    Keep up the good work Aidan. Don't worry, be happy. Your code will never look perfect. You can spend a whole day refactoring it and you will probably still be unsatisfied with it so stop worrying about it. Remember, consistency is most important.

    If you had any specific questions, hit me up.

    Marked as helpful
    1
    Aidan Wright•30
    @greasypicadilloPosted about 3 years ago

    @beslerpatryk Thanks for the kind words and helpful criticisms! I really do appreciate it. I looked up mobile-first design and loved the idea. I'm going to give it a go on my next challenge.

    Also I viewed and liked your solution to this challenge. Great work!

    Thanks again, and I'll be in touch when a question inevitably confounds me.

    Be well

    0

Please log in to post a comment

Log in with GitHub

Join 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