Skip to content
Submitted almost 3 years ago

responsiveness with css grid, js to do page and tab navigation

Mohamed Muse Adenā€¢30
@CustomHaven
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Space tourism multi-page website
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

I finished the last page for technology.html followed Kevin Powell's example but there is 1 thing I have a iPhone 7 which is a very small phone somehow page layout even with Kevin's work it does not look that good. But if I test the layout on inspect on Google Chrome Desktop and check for responsiveness for iPhone 6/7/8 from my desktop google chrome inspect then it looks good I don't know why the physical iPhone has problem

Community feedback

  • Daveā€¢5,295
    @dwhensonPosted almost 3 years ago

    Great job here!! @CustomHaven I love that the page works with the keyboard!!

    One very small but nice thing to add is outline styles to replace the default browser outline when tabbing through a page.

    I have found the advice in this article very useful, and use it in pretty much all my projects: https://css-tricks.com/the-focus-visible-trick/

    /* Add styled focus states on tab not hover */

:focus-visible {
  outline: 3px dotted currentColor;
  outline-offset: 0.25rem;
}

:focus:not(:focus-visible) {
  outline: transparent;
}

    Lovely stuff!!!

    Cheers šŸ‘‹

    Dave

    1
  • Kunalā€¢105
    @kunals741Posted almost 3 years ago

    Great Job!

    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