Used flex: changed flex-direction from row to column for mobile design

Community feedback

• 

  zurnadurumm•130

  @zurnadurummPosted over 1 year ago

  Hello there🙌. I hope you're doing well. Congrats on completing your challange successfully✊.

  Your project looking good and I think you can do some changes for the closest result.

  • You don't need positioning for flex items in this challange. You've used position: relative in your .summarization flex item at both @media tag and p.summarization class. This properties cause your text goes on te upper text. You should remove it for better view.

  • In .summary container you can add padding: 1.5rem value on your @media tag. Also, it is unnecessary using height: 45vh; property on there. Your final .summary will look like after that:

  @media only screen and (max-width: 600px)
  .summary {
      width: 100%;
      /* height: 45vh; */
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      border-top-right-radius: 0;
      border-top-left-radius: 0;
      border-bottom-left-radius: 4rem;
      border-bottom-right-radius: 4rem;
      padding: 1.5rem;
  }
  

  • There is a height property problem on the .results class same as the previous point.
  • In your .section-score-container class I recommend you using gap: 1rem property for better results on mobile side.

  .section-score-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1 1 auto;
      justify-content: space-between;
      gap: 1rem;
  }
  

  Also, I recommend you using grid on mobile side of your pages. In this case you will do same thing with easier way👌.

  For grid examples you can check CSS-trick , MDN, and YouTube tutorial videos as well.

  You can submit a new solution after editing your code if you want.

  I hope you find this helpful 😊.

  Happy coding!👋

  Marked as helpful

  0

  ---

  

  Devin Roy•50

  @marl3ykingPosted over 1 year ago

  Thanks for taking the time to help me out with these tips. I totally forgot about the gap property lol.@zurnadurumm

  0