Skip to content
Submitted about 1 year ago

Responsive Intro section with drop down nav using vite and tailcss

Chinwe Chiaku Chukwuogor•120
@Kiraadaves
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Intro section with dropdown navigation
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

So, I'm not even going to lie, I had a hard time getting the active mobile state where the nav opens above the image. Mine still pushes the image down completely. Would appreciate help fixing that. I also noticed that the svg logos at the below the "Learn more" button cut off some parts of the text when i tried resizing them to fit mobile view. Thus mine is quite cramped in the mobile view.

Criticisms and feedback would be appreciated of course. Thank you!

Community feedback

  • alexander•1,300
    @alex931dPosted about 1 year ago

    hello great solution ! here is my tips for your solution:

    1. add an wrapper around everything and add margin:0 auto, max-width: 1520px this will make sure the content can't span past 1520px since it looks bad on larger screens
    2. fix the image i notice on mobil view the image takes up the entire view
    3. remove the menu popup effect
    4. add an website title plus remove the fav icon
    5. add an max height on the image
    6. stop using h1's since your telling the crawler bot that this is an title
    7. stop make menus with divs use the ul -> li elements since the browers will know this is an menu
    Marked as helpful
    0
    Chinwe Chiaku Chukwuogor•120
    @KiraadavesPosted about 1 year ago

    @alex931d Thank you so much. Will apply the changes

    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