Responsive Four Card Feature Section

Community feedback

• 

  nicowashere•250

  @devdrivenaiPosted 3 months ago

  This was a really good one.

  I really liked how you managed to make the cards actually responsive, as in they shrink and grow to fit the space.

  Also, the shadows are pretty neatly accomplished.

  And finally, the (headings') fonts also scale.

  Not sure what do you mean about the nth-child. Where did you try it and what makes you think it didn't work? Maybe we can troubleshoot it? (Right now, I am thinking maybe because the .card. is not direct child of .layout-grid, but is the (only) child of .col, so if you try to for example select .card:nth-child(3n), actually the .col parent only has one .card as a child. Could that be the problem? If not, let me know and we can see it through).

  Great stuff, keep it up!

  1

  ---

  

  M. Abubakr•250

  @m-abubakr1Posted 3 months ago

  @devdrivenai I appreciate your kind words 🙌🏻. I have found the reseaons of the unexpected behaviour, as you said, "the .card. is not direct child of .layout-grid, but is the (only) child of .col, so if you try to for example select .card:nth-child(3n), actually the .col parent only has one .card as a child."

  The issue arises because the :nth-child selector operates on the element's position relative to its parent. If .card elements are not direct siblings of each other but are instead nested inside different parent elements, the :nth-child selector will not behave as expected.

  In my case, .card elements are inside .col elements, and .col elements are siblings within .layout-grid. So, the :nth-child() selector applies to the .col elements, not the .card elements directly.

  Solution: target the .card elements based on their position inside their parent .col. Use :nth-child on the .col and combine it with a descendant selector for .card:

  .col:nth-child(1) .card {
    border-top: var(--bw) solid var(--clr-Cyan);
  }
  .col:nth-child(2) .card:first-child {
    border-top: var(--bw) solid var(--clr-Red);
  }
  .col:nth-child(2) .card:last-child {
    border-top: var(--bw) solid var(--clr-Orange);
  }
  .col:nth-child(3) .card {
    border-top: var(--bw) solid var(--clr-Blue);
  }
  

  Thanks to your feedback, I was able to think it like this.

  1

  

  nicowashere•250

  @devdrivenaiPosted 3 months ago

  @m-abubakr1 Great to hear that, mate. Keep it up!

  1
• 

  P

  Nishanth Venkatesan•660

  @nishanth1596Posted 3 months ago

  Great work! I learned a lot by going through your solution, and your code is well-structured. I plan to implement many of the things from your code in my next solution.

  When I checked your code, I reviewed the README out of habit and noticed that it hasn't been updated. Editing the README to reflect the project would make it look even more professional. Additionally, you might want to consider removing the design files from the GitHub repository.

  This is just a small suggestion. Once again, great work!

  1

  ---

  

  M. Abubakr•250

  @m-abubakr1Posted 3 months ago

  @nishanth1596 I Appreciate the suggestion, you are right, will work on the readme file as well.

  0