Four card feature section

Community feedback

• 

  Rachel Cessna•195

  @cessnar516Posted about 3 years ago

  Hi VetrV,

  One thing that may help simplify your code would be to target the elements inside of the cards instead of adding classes to them. For example, right now you have <h3 class="cardTitle"> and you're targeting .cardTitle in your CSS. Instead, you could remove the class and target .singleCard h3. This would eliminate several classes from your HTML.

  You may also want to try using CSS Grid to align the cards instead of Flexbox. Grid will allow you to get the intended layout without having to relatively position each of the cards, which would cut down on your CSS a lot. Here's a great resource for Grid if you want more information: CSS Tricks - A Complete Guide to Grid

  One more note related to accessibility - right now, you're jumping from the page title <h1> to <h3> in the cards which can be confusing for individuals who use screen readers and those with cognitive disabilities. Screen reader users have the option to hear a list of all the headings on a page, and the technology will tell them what level each heading is. If they're listening to the list, and a heading level is skipped, they may think they have missed some information. For this reason, I recommend changing your card titles to <h2> so your headings are sequential.

  Hope this helps!

  Marked as helpful

  0

  ---

  

  VtreV•70

  @vtrev05Posted about 3 years ago

  @cessnar516 Hi Rachel!! Thank you so much for your comment! Yep, I should use less classes to simplify my HTML content but in that way is easier for me to "structure" my mind.

  For now I am junior so I am trying to improve all techs. I must practice with grid. I think my biggest weakness is with the responsive designs so I will practice it harder.

  Wow, this is a really interesting info. I haven't known it. I will considere it for the future. Thank you again for your help Rachel!

  0
• Account deleted

  Hi,

  On desktop the cards are misaligning and not where they should be, especially the top and bottom ones and when you just switch to mobile they are too stretched out that there's a lot of empty space inside them.

  Marked as helpful

  0

  ---

  

  VtreV•70

  @vtrev05Posted about 3 years ago

  @thulanigamtee Ty for your comment Teegamtee, I did it with flexbox so I had problems with the responsive "behaviour" of cards. I should've done it with grid.

  0