Responsive layout without media queries

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, @GregLyons! 👋

  Awesome work on this challenge! Your solution is responsive even without any media queries, amazing! 👏 It's great that you've put some effort to explain the code that you've written! 👍

  So, my recommendation is to try to fix all the accessibility issues that have been reported by Frontend Mentor and make the :focus and create the :focus-visible styling different than the :hover effect. The purpose of the :focus-visible styling on interactive elements is to make the users that navigate the site using keyboard know where they are on the page.

  Keep up the great work!

  Marked as helpful

  1

  ---

  

  P

  Grog the Frog•480

  @GregLyonsPosted over 2 years ago

  @vanzasetia Thank you!

  The accessibility issues that Frontend Mentor reported on my end had to do with lacking an <h1> and a <main> (which I've fixed now). I do try to be very aware of making :focus visible, not just :hover, and I believe I had that before (I tabbed through to check).

  However, I didn't know about :focus-visible before, and I think it'll be very handy for me going forward; it's been bothering me recently that if I put a :focus style on a <button>, the style will stay even after being clicked. It seems like :focus-visible is the way to fix this, so thanks for that!

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @GregLyons You're welcome! 😄

  It's great that you've fixed all the reported issues! 👏 Keep it up!

  0
• 

  Kamasah-Dickson•5,590

  @Kamasah-DicksonPosted over 2 years ago

  your solution looks great and on smaller devices also. Texts are also readable. Another way you can achieved this also is by using CSS grid which has the minmax() Function to determine your minimum width and your maximum width. It sometimes need media queries depending on the design. Besides good job there👍 Happy coding👍

  Marked as helpful

  1

  ---

  

  P

  Grog the Frog•480

  @GregLyonsPosted over 2 years ago

  @Kamasah-Dickson Thanks for the feedback. Using CSS Grid with minmax() for responsivity is also something I want to work on, so I'll keep that in mind for the future.

  0

  

  Kamasah-Dickson•5,590

  @Kamasah-DicksonPosted over 2 years ago

  @GregLyons am Glad to hear that, have a nice day👍

  0