Four card feature section -HTML, CSS, Flexbox

Community feedback

• 

  Teodor Jenkler•4,040

  @TedJenkler

  Posted 11 months ago

  Hi @Jan-Dev0,

  Nice job on the project! I noticed a small issue with responsiveness. I’d recommend always using rem or % for sizing, and avoiding fixed widths—use max-width and min-width instead. Like mentioned in previous feedback, the easiest way to tackle this challenge is by using Grid, but it’s totally doable with Flexbox if you play around with media queries. You could use three flex parents, though Grid is generally recommended for more control.

  On several breakpoints, there are width and height inconsistencies. I’d suggest looking into that and trying to use as little CSS as possible—it often simplifies things.

  To improve SEO and accessibility, consider using <section> tags instead of <div>, with aria-label, aria-labelledby, or title attributes to make the content more accessible.

  Your code is heavily nested with <div> elements. For the next project, I’d recommend minimizing the use of <div>s to keep the code cleaner and more readable. For instance, using flex-column or flex-row instead of extra <div> containers can help organize and stack elements more efficiently.

  Keep up the great work!

  Best, Teodor

  10

  Marked as helpful
• 

  Aymen developer•750

  @aymenthedeveloper

  Posted 11 months ago

  for a layout like this its better to use grid since it allows us to define the grid cols and rows and then we can use the properties grid-row and grid-column to position each element exactly in the grid, which makes thing much easier.

  i personally used flex box for this project when i did it but if i would go back an improve it i will defiantly use grid.

  you can check my solution if you want to see how i did it using flex box.

  10

  Marked as helpful