Results summary component solution

Community feedback

• 

  4LastBreath•210

  @4LastBreathPosted about 1 year ago

  Hi again @ivan-josef, you improved. 🖖 You can't align 'summary' to the left because of your align-item:center on your class 'half'. I also noticed that you used padding or margin on every element to space them inside your flexbox. You can do it a much easier way, just use the "justify-content: space-between" (it's gonna push element at both ends of your half class), or the gap property if you want to choose precisely the space between every element of your flexbox. You'll need some padding on your right half element if you do this. And you used a span for the button 'continue', change it to button in your html.

  That's how you can align 'summary' to the left and keep your flexbox

  .half {
      width: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between; 
      padding: (your padding);
  }
  
  .half:last-child > h3 {
     width: 100%; (if it take all width, it's gonna avoid the align-item:center)
     text-align: left;
  
    or
   
    margin: 0 auto 0 0; (with margin auto to the right, it's gonna push it to the left)
  }
  
  

  Marked as helpful

  0

  ---

  

  ivan-josef•70

  @ivan-josefPosted about 1 year ago

  @4LastBreath thank you bro, love you

  1