Responsive 3 Card Column Mobile First Approach

Community feedback

• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted almost 3 years ago

  Hiya,

  Very nice looking solution! It has some problem with the responsiveness though: check it between 375 and 590px.

  For solving the accessibility issues: you could wrap your content in main. Also, there should only be one h1 (the report will probably tell you this, as soon as you include a main in your code). For the titles you could use h2s and have a screen-reader only h1 that is visually hidden from the average user. If you google visually-hidden/sr-only classes, you could find a good solution for this.

  Marked as helpful

  0

  ---

  

  Ines Riahi•110

  @inesriahiPosted almost 3 years ago

  @FluffyKas Thanks for this valuable feedback! I have tried to solve the problems you mentioned. Would you please check how to solve the accessibility issue that arose?

  Thank you so much,

  0

  

  P

  Fluffy Kas•7,715

  @FluffyKasPosted almost 3 years ago

  @onshadi Huh, I honestly didn't expect that to happen. Interesting. Let me play around with my own code, I'll figure it out and let you know ^^

  1

  

  P

  Fluffy Kas•7,715

  @FluffyKasPosted almost 3 years ago

  @onshadi Hey, I copy-pasted your sr-only class into my code and it's not giving me any issues. Here's my solution, just in case. It's odd but my best guess is that github updates quite slowly, so perhaps you just need to wait a few mins and generate a new report? It was pretty slow for me.

  At least this was a good opportunity to revisit and improve my old solution to this challenge, so yay ^^

  Marked as helpful

  0

  

  Ines Riahi•110

  @inesriahiPosted almost 3 years ago

  @FluffyKas Yes, that was the problem 😶 ! Thank you so much for your help.

  0