four cards with flexbox

Community feedback

• 

  Karol•1,620

  @karolbanatPosted about 2 years ago

  Hi @VHAlvesS, great work on completing this challenge 🎉. Answering your question: The reason why :nth-child(1) affects two divs is because the first affected div is the first child (nth-child(1)) of the div with class flexWrapper. And the second affected div is also the first child, but of the div with class flexWrapper__mid. So it looks like this. In:

  <div class="flexWrapper">
      <div class="flexWrapper__card">...</div>
      <div class="flexWrapper__mid">...</div>
      <div class="flexWrapper__card">...</div>
  </div>
  

  first <div class="flexWrapper__card">...</div> inside <div class="flexWrapper">...</div> is the first child. And in:

  <div class="flexWrapper__mid">
      <div class="flexWrapper__card" id="builderCard">...</div>
      <div class="flexWrapper__card">...</div>
  </div>
  

  the <div class="flexWrapper__card" id="builderCard">...</div> is the first child of <div class="flexWrapper__mid">.

  Also I see you are using BEM, so you could replace the :nth-child selectors with something like BEM modifier class, for example: <div class="flexWrapper__card flexWrapper__card--cyan">...</div>

  Hope it helps. Have a nice day.

  Marked as helpful

  1

  ---

  

  Vitor Hugo•60

  @VHAlvesSPosted about 2 years ago

  @karolbanat Thank you for your feedback and for your explanation, now I can understand it a lot better, yes I experienced a bit of BEM, just started to integrate it into my projects recently and it is amazing. In my next project I will pay more attention to modifiers. Have a nice day too 😊

  1
• 

  Adriano•38,250

  @AdrianoEscarabotePosted about 2 years ago

  Hi Vitor Hugo, how are you?

  I really liked the result of your project, but I have some tips that I think you will enjoy:

  • Consider using rem for font size .If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.

  if you want to continue coding with px, you can download a very useful extension in vscode, it converts px to rem! link -> px to rem

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  0

  ---

  

  Vitor Hugo•60

  @VHAlvesSPosted about 2 years ago

  @AdrianoEscarabote Hello i'm doing great thank you for your advice i'll be more conscious about that from now on. I admit that I've looked for something like that this extension will help me a lot, thank you.

  0