Advice generator app using the Advice Slip API

Community feedback

• 

  Abdul Qadeer•50

  @abdulqad33rPosted over 1 year ago

  You did a great job building this card. But little tips..... If you want the card's bottom at the center of the button, you should do this:

  button {
  --height: 4rem;
  width: 4rem;
  height: var(--height);
  bottom: calc(var(--height) / -2);
  /* Your remaining code */
  }
  

  Now when you change button's height, it's bottom will be automatically calculated and put the button at the center. Tip: Since you are using the same width and height because button is circle, do this:

  button {
  --size: 4rem;
  width: var(--size);
  aspect-ratio: 1;
  bottom: calc(var(--size) / -2);
  /* Your remaining code */
  }
  

  Now, when you change your --size, your height and bottom will be calculated, and you don't have to make any changes to them....

  Also decrease some padding of the card and button size in small screen sizes, maybe screens that are less than 300px, @media (width < 300px) { }

  0