Skip to content
Submitted about 2 years ago

Challenge done with react , styles-component, grid, flex

Stalin•410
@StalinAM
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blogr landing page
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hello, this is my solution to this challenge but I have two problems and I was hoping you could help me.

1.- When I open a submenu and then open another one, the previous one doesn't close. 2.- I would like to close all the menus when I click on any part of the screen.

Thanks in advance!

Community feedback

  • Travolgi 🍕•31,400
    @denieldenPosted about 2 years ago

    Hi Stalin, congratulations on completing the challenge, great job! 😁

    To solve the problem you say with the menu u want to go see @christopher-adolphe advice in my solution of this challenge which helped me a lot.

    Some little tips for optimizing your code:

    • add transition on the element with hover effect
    • instead of using px use relative units of measurement like rem -> read here

    Hope this help! Happy coding 😉

    Marked as helpful
    0
    Christopher Adolphe•600
    @christopher-adolphePosted about 2 years ago

    Hi @denielden, thanks for mentioning me here. I'm happy to see that the solution I proposed you is also helping others.

    @StalinAM, I had a quick look at your solution for this challenge on a wide viewport and the content is very spread apart. I would suggest you add a container inside your <section> with a max-width.

    1

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