BMI Calculator

Community feedback

• 

  arogersrenee•330

  @arogersreneePosted about 1 year ago

  Gradients & Drop shadows

  Are you using the Figma files? The gradients and box shadows needed are provided with the design. Figma provides the styles when in dev mode.

  Bottom Grid

  For the bottom portion I used a 12-column grid and positioned the items where I wanted them using grid-column.

  Here's a snippet of the css I used to position the items:

  .limitations-card,
  
  .limitations-card:last-child { grid-column: span 4;}
  
  .section-bmi-limitations  >  div:nth-child(3) { grid-column: 8 / span 4;}
  
  .section-bmi-limitations  >  div:nth-child(4) { grid-column: 5 / span 4;}
  
  .section-bmi-limitations  >  div:nth-child(6) { grid-column: 3 / span 4; }
  

  I think my HTML and CSS are good. Don't look too much into the JS 😅 Take a look at my solution here: https://www.frontendmentor.io/solutions/body-mass-index-calculator-L_mIraAuz0

  Custom Variables Take a look at how I set up my classes and use the custom variables. I think what's making it hard for you is that you are making a unique class for each custom variable. Try making one class and style that using the custom variables. For example:

  .limitations-card-heading {
  
  font-size: var(--fs-heading-S);
  
  font-weight: var(--fw-semibold);
  
  line-height: var(--lh-heading);
  
  letter-spacing: var(--ls-heading-S);
  
  color: var(--clr-gunmetal);
  
  }
  

  1