Responsive 2-Column Card Preview using Flexbox

Community feedback

• 

  Folarin Akinloye•1,240

  @folathecoderPosted over 3 years ago

  Hi Lesley!

  Based on this project, the use of "a" tag is appropriate since its only function is to link to an external or internal source.

  There are other use cases where the button tag is appropriate. You can check out this article to learn more about buttons: https://css-tricks.com/use-button-element/

  Have a great day!
  Happy Coding! 😎

  1

  ---

  

  Lesley Wesley•365

  @LesleyWesleyPosted over 3 years ago

  @folathecoder Thank you! I thought I was probably on the right track, but I wanted to make sure, because that's something I always get confused about. I'm definitely bookmarking that article for future reference! haha

  0
• 

  T

  Grace•31,230

  @grace-snowPosted over 3 years ago

  Hi Lesley

  Firstly, this looks great. There are 2 important accessibility issues with the code

  1. Html root size in pixels can break the site for those who rely on different zoom settings. If you want to change size on html it should be in percent or rem. Usually you shouldn't need to do this, just pop it in rem on the body (15/16 = rem size in this case)

  2. Use CSS to capitalise text in those headings. Screenreaders read capitals as individual letters if that's how html is written. So SUVs would be read out correctly, but SUVS OR LUXURY would not.

  0

  ---

  

  T

  Grace•31,230

  @grace-snowPosted over 3 years ago

  Other than that the only improvements I have for you are to do with making css a lot shorter / more easily responsive...

  I don't think you need as many media queries on this. That all stems from using percentage widths for containers as your main/only technique for width limiting.

  Instead, use some padding on an outer wrapper to ensure content can't hit the sides of the screen. Then let block elements be their default 100% width and use max-width elsewhere (in rem or px) to limit how large they can grow.

  You will have more consistent results this way and usually need far fewer media queries.

  0

  

  Lesley Wesley•365

  @LesleyWesleyPosted over 3 years ago

  @grace-snow Thank you for the detailed feedback and tips! :)

  0
• 

  Lucas Piputto•305

  @paiputPosted over 3 years ago

  I think it's okay, I did the same way. And I think it's because those buttons are supposed to take you to another page on your website.

  0

  ---

  

  Lesley Wesley•365

  @LesleyWesleyPosted over 3 years ago

  @paiput Thank you! :)

  0