Skip to content
OverviewSolutions
8
Comments
3
zurnadurumm
@zurnadurumm

All comments

  • zurnadurumm•130
    @zurnadurummPosted over 1 year ago

    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
    @zurnadurummPosted over 1 year ago

    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
    @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