Responsive Advice Generator App | HTML CSS JS

Community feedback

• 

  Bryan Li•3,530

  @Zy8712Posted 12 months ago

  Your site looks good and functions properly. To answer your question, if you wanna make more room for your advice you should probably adjust your box's layout (specifically with the divider). In my opinion, you should have the divider and button be locked into position using position: absolute. Additionally, you should have the Advice# be placed relative to to the top and a box of a certain size dedicated to the quote.

  So basically (you roughly need to):

  • Change button from position: relative to position: absolute
  • Add position: relative to your .card class
  • Remove justify-content: flex-end from your .card class
  • Add position: absolute and bottom: 30px to your .separator class
  • Change .card h4 to have a margin-top: 40px and margin-bottom: 5px
  • Modify .card h2 to:

      display: flex;
      flex-direction: column;
      justify-content: center;
      color: var(--lightCyan);
      margin-top: 5px;
      margin-bottom: 20px;
      width: 450px;
      height: 200px;
      font-size: 28px;
  

  This code I wrote is very rough, so you should modify as you see fit. Hope this helps to some degree 👍

  My code and site for reference.

  Marked as helpful

  0