Submitted over 3 years ago

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

solid-js

Mohamed Muse Aden•30

@CustomHaven

A solution to the Space tourism multi-page website challenge

Preview Code

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

Code

Please log in to post a comment

Community feedback

P
Dave•5,295
@dwhenson
Posted over 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
Kunal•105
@kunals741
Posted over 3 years ago
Great Job!

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