Clipboard Landing Page

Community feedback

• 

  Sahand Masoleh•1,210

  @sahand-masolehPosted about 2 years ago

  Hi lieneil! Really good solution!

  About your question, you can also use a grid with grid-auto-flow: column and then setting your grid-template-columns to repeat with auto-fit.

  Also, don't use height: 100vh on your pages because the moving address bar of mobile browsers is included in it and it will push everything down. Use height: 100% on the "parents" of the element that you want to cover the page, and then min-height: 100% on that element.

  Nevertheless, you don't even need that for this page, since it doesn't have a vertically centered element.

  One more thing, you don't need to set height: auto on elements, it is by default set to auto.

  Marked as helpful

  0

  ---

  

  lieneil•560

  @NJVSPosted about 2 years ago

  Hi @sahand-masoleh, thanks for the reply.

  I have seen your solution for this challenge and tried what you have done. I actually just copy your code coz this is the first time i've seen this...

  grid-template-columns:
                  [first] minmax(min-content, 15ch) [second] repeat(
                      3,
                      minmax(min-content, 15ch)
                  )
                  [second-to-last] auto [last];
  

  Tho im still sticking with my solution because it automatically add a new row on tablet mode without media query.

  BTW, about the address bar of mobile, i didn't know about that. I rarely test my solutions to an actual mobile phone. Thanks, i learned a lot from you.

  0

  

  Sahand Masoleh•1,210

  @sahand-masolehPosted about 2 years ago

  @NJVS Haha, it's from a few months ago so I don't really remember what I did. :D

  But those brackets are track names, when you use repeat and you don't know what track number you will need, you can give it a name and use that instead.

  Marked as helpful

  1
• 

  Adriano•38,060

  @AdrianoEscarabotePosted about 2 years ago

  Hi lieneil, how are you?

  I really liked the result of your project, but I have some tips that I think you will enjoy:

  • The links must have an aria-label or sr-only text that tells where the link navigates the user. For example: Visit our Facebook. For images, you should set aria-hidden=”true” to be ignored by screen readers and to avoid redundancy and repetition.

  I looked at your code here and realized that you forgot to delete the content without the tags, go down the code and you'll understand what I'm talking about ahauahua

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  0

  ---

  

  lieneil•560

  @NJVSPosted about 2 years ago

  Hi @AdrianoEscarabote, thanks for the reply.

  I just started reading articles about web accessibility, and I was planning to implement it in my future solutions. Do you have any recommended articles or videos for this?

  And yeah, i forgot to delete those comments lol thanks.

  0