Skip to content
Submitted over 1 year ago

Results-Summary Component (Responsive Layout)

oo2smh•100
@oo2smh
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Results summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Some Struggles

  • Started building the project without looking at the screen-size. After building for awhile, I realized that it broke during the smaller screens and had to go fix it. Next time, I want to start off from the smallest version
  • Had difficulty with max-width and min-width
  • Overlapping the summary component underneath the results component was difficult. I ended up using negative margins, but felt like this is not an elegant way to solve the problem

Community feedback

  • Diego Serrano•180
    @dserranoiPosted over 1 year ago

    For the overlapping issue, you really don't need to overlap them, they look overlapped in the design but really you can approach the solution in a way where you have a parent container let's say a DIV and inside it you have 2 children divs. You can apply flex display to the parent div, and in the div that wraps Your Result apply the border radius property as well to the parent Div.

    I am sure that should help to accomplish that piece..

    Marked as helpful
    0
    oo2smh•100
    @oo2smhPosted over 1 year ago

    @dserranoi That makes a lot more sense than what I did. Thank you for sharing. That is a much better solution than what I did lol. I appreciate it! 🙏

    1

Please log in to post a comment

Log in with GitHub

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