Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • zurnadurumm• 130

    @zurnadurumm

    Posted

    Hello👋

    Congrats! You made your first project on this site🥳

    I think the QR code image URL has a problem, thats why it isn't showing up. Correct your image URL and push your code update to your code repository. After deploying you can take a new screenshoot of your site by pressing take a screenshot on submit page.

    Have a nice day. Happy coding.

    Marked as helpful

    0
  • zurnadurumm• 130

    @zurnadurumm

    Posted

    Hello there👋.

    Well done for completing your project. There are some recommendations for you to improve your code.

    • It is better to use em, rem insead of px which absolute unit. In here you can learn about usage of units if you don't know.

    • Please make your site responsive because there are mobile and tablet devices too. If you don't know about responsive pages, click here.

    I hope it is helpful for you! 🙌

    Happy coding!

    0
  • zurnadurumm• 130

    @zurnadurumm

    Posted

    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