Skip to content
Submitted about 1 year ago

Responsive Result/Summary Component with Mobile Version

Annika Veksø•40
@Veksoe
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

My solution is a mess! At least it feels like it's a huge mess, but the design got there in the end! However, it could most likely be a lot better! So I would love some feedback, if anyone have something to offer!

  • Looking at a semantic point of view, what is a good or right way (if any) to go about it? What types of semantic elements would make sense to use in a project like this?
  • I really struggled with the summary side of this design in order to get each part to look right, but my solution seems a bit to much and to messy, so is there a way to do it in a bit more.. clean way? Feel free to link to your own solution, if you made a nice looking code for this challenge as an example!
  • Also, how would you make the different colored boxes in the summary?

Community feedback

  • Roraima Lugo González•510
    @roraima1986Posted about 1 year ago

    There is no better or more perfect solution in a CSS design, I think you did it right.

    What could be a useful tip is that the ease of classes is that you can add as many as you need in a div, for example:

     <div class="box red"> </div>
 <div class="box blue"> </div>
 <div class="box green"></div>


    .box {
         width: 100px;
         height: 100px;
         border: 1px solid black;
     }

    .red {background-color: red}
    .blue {background-color: blue}
    .green {background-color: green}

    This example may give you an idea of how to summarize part of your code.

    Marked as helpful
    0
  • alexander•1,300
    @alex931dPosted about 1 year ago

    very nice solution !

    0

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