Mobile first 3-column-preview-card-component-main

Community feedback

• 

  Anna Leigh•5,135

  @brasspetalsPosted over 3 years ago

  Hi, William Spanfelner! 👋 Congrats on submitting another solution! 🎉

  Here's a few suggestions to make it even better:

  • A small design nitpick is that the background-color for the body as well as the buttons should be light gray rather than white.
  • From 376px - 800px, the card overflows the screen as well as on smaller mobile screens (iPhone SE - 320px). To make your solution fully responsive and accomodate these sizes, you could lower the min-width of your cards div for small mobile screens, and adjust your media query for the medium/tablet widths.
  • Another common mistake (and something I've done myself 😅) is using button elements for what are actually button-styled links. While they look like buttons, they don't have button functionality, so it's better practice to use anchor tags.

  Hope these suggestions are helpful, and happy coding!

  1

  ---

  

  William Spanfelner•155

  @Will-1-AmPosted over 3 years ago

  Thank you very much for taking the time to look at my code @brasspetals!

  The background-colour on the buttons, heading and body background is a very valid point and initially the buttons were setup that way. When I compared the design files to my work, however I decided to change the colour back to white as I couldn't discern the gray colour in the design file. Nevertheless, the gray colour has now been reapplied to the three areas as stated in requirements and as you rightly pointed out.

  The overflow issue is also something I planned to give a little love.

  Thank you for also highlighting the button elements point - I will put that right also.

  0

  

  William Spanfelner•155

  @Will-1-AmPosted over 3 years ago

  @brasspetals The suggested amendments have been added. Would you be so kind as to cast your gaze over my code and let me know your thoughts?

  0

  

  Anna Leigh•5,135

  @brasspetalsPosted over 3 years ago

  @Will-1-Am It's so great to see the site now fully responsive - and with the button/anchor tag switch now semantically correct! 👍 The color change is subtle, but with everything now the same light gray, it pulls it all together.

  I really had to search, and the only thing I could see to improve was to convert a few leftover px values to rem (for example: min and max width values on the .cards media query). Otherwise you're golden! 🙌

  1

  

  William Spanfelner•155

  @Will-1-AmPosted over 3 years ago

  @brasspetals Thank you for your reply and suggestions. The px to rem conversions have now been applied. Thank you again for all of your effort and attention.

  0
• 

  Alexey•390

  @alexeykuz-sysPosted over 3 years ago

  Well built, fully responsive page! Well done!

  1
• 

  Zara Ag•65

  @szcompanyPosted over 3 years ago

  Hello.

  I really do like the way you did it. Congrats on finishing this project.

  0