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

Submitted

Responsive component using CSS FlexBox

@Lanietodev

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


I had no difficulties at all. I've really gotten better and It's evident in this project. I'd like feedbacks on how I did. Thank you.

Community feedback

Callie 170

@Callietron300

Posted

Hey this is my first time giving feedback, I think it looks so great; these are just a few things I noticed in your code that will help it look even better:

  • Your section with the class name 'bottom' the corners need rounding
  • when looking at the different breakpoints between 480px & 768px the attribution element is pushed to the right-hand side - i think you could fix this by adding flex-direction: column; for that media query.
  • when viewing at widths smaller than 768px there is the padding on the body that prevents your element from sitting nicely against the sides of the screen. removing the padding will fix that!
  • also if you also declared some widths for the two elements for the desktop view it would stop them from stretching really wide for larger screens.

Feel free to have a look at my solution and tell me any of your thoughts! <3

Marked as helpful

1

@Lanietodev

Posted

@Callietron300

Hi Callie thank you, I literally just noticed the attribution on the RHS before i saw your comment 😅, i'm currently working to fix that. I'll also take up your other suggestions. Thank you so much.

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