3 column card with CSS Flexbox

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  👋Hi Ash! My name is Vanza!

  I would like to answer your questions:

  • In my opinion, the best unit for font-size is rem unit, because it allow the user to control the font-size. If you want to use vw, you can do that if you use clamp() function. I would look something like this:

  font-size: clamp(1rem, 0.8750rem + 5vw, 3.5rem);
  

  • My recommendation on selecting button is by using class. Like for instance, if you have a bunch of buttons:

  <header>
    <button></button>
  </header>
  <section>
    <button></button>
  </section>
  <footer>
    <button></button>
  </footer>
  

  Instead of using id, you can use btn generic class and then for the specific styling you can add modifier classes.

  <header>
    <button class="btn btn--header"></button>
  </header>
  <section>
    <button class="btn btn--section"></button>
  </section>
  <footer>
    <button class="btn btn--footer"></button>
  </footer>
  

  So, in your css you don't have to use id or nth-child to make sure that the specificity is at a low level:

  
  /* General Button Styling */
  .btn {
    display: inline-block;
    border: 1px solid orangered;
    padding: 1rem;
  }
  
  /* Specific button styling */
  .btn--header {
    background-color: steelblue;
  }
  
  .btn--section {
    background-color: red;
  }
  
  .btn--footer {
    background-color: orangered;
  }
  

  This approach is using BEM methodology.

  • Yeah, it seems small on the mobile, try to increase the font-size a bit.
  • No, it doesn't disappear on my mobile phone.

  That's it! Hopefully this answer all your questions!

  Marked as helpful

  4

  ---

  

  Ash•80

  @nyxravenPosted over 3 years ago

  @vanzasetia Hi Vanza, thank you so much for your answers! Much appreciated, will try :)

  0
• 

  Anna Leigh•5,135

  @brasspetalsPosted over 3 years ago

  Hi, Ash! Congrats on completing another challenge!

  Vanza has already given you some excellent advice, so I don't have much to add. 😄

  For Safari and iOS mobile, I believe the issue will be fixed if you set the background-color on the .card-button. 👍

  Marked as helpful

  0

  ---

  

  Ash•80

  @nyxravenPosted over 3 years ago

  @brasspetals Thank you for the advice! 😄

  0