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

Results Summary Component

@suhendripurnama

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'm found difficulties using flexbox to layout positioning. On this challenge i used everything i know. Feel free to give suggestion so i can code better Thank you :)

Community feedback

@kileybelanga

Posted

Hey:) This is looking great! I relied heavily on https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for learning flexbox along with some youtube videos ;)

Try adding some additional styling and flex-wrap (for stacking on mobile) in your main tag. Keep in mind the main tag is holding both your results and summary containers, so try adding the shadow there so that it is behind both instead of just on the summary container.

I also had success with removing the width and height to the containers. It will look absolutely awful at first, but the height and width are adjusted for accordingly. I think you may just need to adjust styling within each individual containers to get it working right.

Theres so much to flexbox and I am still learning too so I hope this helps a little:)

0

@suhendripurnama

Posted

@kileybelanga Thank you for the suggestions and references, i'll will try :)

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