3-column-preview-card-component using Flexbox and common CSSs

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  Hmmm there’s some interesting choices in this one. I’m not sure why you’ve added a landscape portion to the media query on this - what happens on large portrait screens, they get the mobile version?

  In html the only real issues are the missing footer element for the attribution and use of button elements when you should be using anchor tags

  In css try to keep specificity low. No need to have a class on a div as selector when the class alone would do

  Marked as helpful

  1

  ---

  

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  Another issue when I preview this is that button text is unreadably small for me on mobile. This is because you’ve resized html font size down to 10px. That’s a really really bad idea in my opinion, as it can lead to accessibility issues like this. There’s no reason you need 1rem to equal 10px and this is just introducing issues you need to mitigate against throughout projects to ensure you meet accessibility requirements

  I hope the advice helps

  Marked as helpful

  1

  

  Christ Kevin Touga Watat•270

  @Christ-KevinPosted almost 3 years ago

  @grace-snow thankyou for the advices. I removed the button tags and i putted anchor tags instead and I added the footer.

  About my font-size(10px = 1rem), I have to say that this is just a hack for an easier px to rem conversion that I saw in this(https://www.youtube.com/watch?v=dHbYcAncAgQ&t=581s) video(Min. 11:00 - 13:30).

  In the video it's also said that the use of SASS make this conversion easier. But since I cannot yet be able to code with SASS and I try to focus on pure CSS, I have this approach of conversion and by the way the font-size of my body is setted to 1.5rem(15 px).

  However i'ld like to ask you if you may have an idea how to manage the height of containers on CSS. Do you think that it's a good practice to set the body height to 100vh ? In my project I setted the margin-top and the margin-bottom with vh units. would you advice this practice ?

  Thankyou so much for your help

  0

  

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  @Christ-Kevin the problem is, not every font size will inherit from the body, that’s why some text on this is smaller than the minimum readable requirements. You don’t actually need to do pixel conversion at all. Just use rem and do it by eye on practice projects. In real projects you would have exact sizes already stored in variables / custom properties

  Marked as helpful

  1