Advice generator app

Community feedback

• 

  Che Fernandez•170

  @CheFernandez99Posted 11 months ago

  may i ask how you got that button to stay on the container as the container moves, im assuming you made the position absolute. I had an issue where the advice moving also moved the container and my button wouldn't stick to the container and move with it lik yours is

  1

  ---

  

  Md Abid Hussain•400

  @md-abid-hussainPosted 10 months ago

  @CheFernandez99 The button uses following tailwind css classes for style :

  className="block bg-neon-green p-5 rounded-full max-w-max mx-auto translate-y-2/4"

  block make the content block element

  p-5 is for padding from all direction and 5 is for 1.25rem

  rounded-full is to make the button circular

  bg-..... is for background

  mx-auto is for centering the button with respect to container by setting margin horizontal auto

  translate-y-2/4 is to translate the button in y direction by 50%

  max-w-max is to set the maximum width of button to maximum which is not required i think

  So in short we have to make the button as a block level element then center it by setting horizontal margin auto and finally translate it in y direction by 50%

  You can find the css related to classes in tailwindcss docs

  1