QR code component challenge

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Greeting @surigaoadrian,

  I have few suggestions regarding your solution:

  • To tackle the accessibility issues, you can add a <h1> with class="sr-only" (Hidden visually, but present for assistive tech).

  .sr-only {
  	border: 0 !important;
  	clip: rect(1px, 1px, 1px, 1px) !important;
  	-webkit-clip-path: inset(50%) !important;
  		clip-path: inset(50%) !important; 
  	height: 1px !important;
  	margin: -1px !important;
  	overflow: hidden !important;
  	padding: 0 !important;
  	position: absolute !important;
  	width: 1px !important;
  	white-space: nowrap !important;            
  }
  
  

  • In height: 490px;you would never want to set the height of the element. Let the content inside the card element dictate the height of it.

  • You should use em and rem units .Both em and rem are flexible, Using px won't allow the user to control the font size based on their needs.

  • General point , try to put classes directly on anything you want to style

  Overall , your solution is good. Hopefully this feedback helps.

  Marked as helpful

  1

  ---

  

  Adrian Surigao•30

  @surigaoadrianPosted almost 3 years ago

  @PhoenixDev22 thank you so much for your advice sir, I'll keep that in mind

  1
• 

  Dev Rathore•2,600

  @GitHub-dev12345Posted almost 3 years ago

  If you want to reduce your accessibility, Change this code. 😊

  1. <div class="card"> to <main> ( Used main tag for main card design )
  2. <div class="attribution"> to <footer> ( Used footer tag for footer design)

  I hope you find this helpful & Nice Work Keep it up 👍👍

  Marked as helpful

  1

  ---

  

  Adrian Surigao•30

  @surigaoadrianPosted almost 3 years ago

  @GitHub-dev12345 thank you for your tip sir, will change it right away 😃

  0
• 

  Kamasah-Dickson•5,590

  @Kamasah-DicksonPosted almost 3 years ago

  Your solution looks great on mobile Good work Keep coding👍

  Marked as helpful

  1

  ---

  

  Adrian Surigao•30

  @surigaoadrianPosted almost 3 years ago

  @Kamasah-Dickson thank you so much for the feedback 😁

  0
• 

  Dev Rathore•2,600

  @GitHub-dev12345Posted almost 3 years ago

  Good and Keep Coding 🚀

  1