Responsive Card using SCSS and flexbox

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello Andrei-TC, Congratulation on completing your project. You’ve done great . I have some suggestions ,to tackle the accessibility issues

  • All page content should be contained by landmarks. So wrap the body content in <main > and you can replace the <div>by a <footer>. to read more

  • on mobile landscape the card is very close to the top and bottom of my screen. A little margin on the card or padding on the outer element should sort that.

  • use interactive elements (in this case anchor tags) for anything that should have interactive behaviour (hover styles indicate interactivity) around the image , Equilibrium #3429 and Jules Wyvern.

  • whenever you include interactive elements( button, links, input, textarea), make sure you include clearly visible focus-visible styles . This will make the users can navigate this website using keyboard (by using Tab key) easily.

  • Don’t use pixels , you should use em and rem units .Both em and rem are flexible, scalable units which are translated by the browser into pixel values, depending on the font size settings in your design.

  I really hope this feedback helps , happy and keep coding

  Marked as helpful

  1

  ---

  

  Andrei•170

  @Andrei-TCPosted almost 3 years ago

  @PhoenixDev22 Thank you for your feedback, i adjusted the values, add the anchor tags and made the interactive elements visible when focused. I couldn't get the right height and width of the card from the original design, but I've got the proportions right. Edit: All the changes are in the second attempt: https://www.frontendmentor.io/solutions/responsive-card-using-scss-and-flexbox-zUC24_1nL

  0