Not Found
Not Found
Not Found
Your session has expired please log in again.
Your session has expired please log in again.
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

Submitted

Responsive HTML & CSS using Grid Flex Media query

adrnmatos 150

@adrnmatos

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello all, Could somebody point me out the solution to deal with square edges close the round edges? I could not deal with it. Appreciate it.

Community feedback

Account Deleted

Hi !

Good work just do

border-radius: 50vh;

0

adrnmatos 150

@adrnmatos

Posted

@DoctorLoo Hi Abdullah. Thank you for your reply.

Do you mean to apply border-radius on score circle - from 50% to 50vh?

My issue is related to result-summary joint, in desktop mode. The design seems smooth, integrated with background, that my solution is not. Perhaps make result pane overlap summary pane would do the job, but it would need to change display property on both of them - they are flex, to align inner elements.

Sorry my poor english.

1

Account Deleted

@adrnmatos

No problem body I'm not a native speaker neither :).

Yeah looks like the result-summary is not fully blended with the background.

The solution is quite easy actullay

1- remove the box-shadow from result-summary

2- add these attributes to the container

border-radius: 30px;
box-shadow:  5px 15px 20px -8px  hsl(241, 100%, 89%);

Happy Coding !

0
adrnmatos 150

@adrnmatos

Posted

Thank you, @DoctorLoo. It is much closer to the design now.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord