Solution using HTML and CSS

Community feedback

• 

  gfunk77•1,200

  @gfunk77Posted 12 months ago

  Great job on your solution! I'd suggest maybe trying the following to see if it helps you think about layout:

  • You have a card with two sides, left and right. So maybe start your layout with

  <main>
   <div class="card">
     <section class="container left"> </section>
     <section class="container right"></section>
   </div>
  </main>
  

  Then add your .results in the first section and your .summary in the second section This basically creates a wrapper around the two sections you already have: results and summary, and defines the card.

  • align-items: stretch is a default value so you don't need to write that.

  I hope the layout suggestions. Your solutions looks great. Congratulations on the challenge.

  Marked as helpful

  1
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted 12 months ago

  Hello, Carlos Perez! 👋

  Nice effort on this challenge! 👏

  I'd like to suggest taking another look at the responsiveness of your site, especially around ~1060px where things seem to look a bit broken as the screen width decreases. Remember that even if the desktop and/or mobile views of your site look good, it is important to make sure that your site looks great across all screen sizes so that as many people as possible can enjoy your work. If you’d like to learn more about building responsive layouts, check out this helpful course

  Also I wouldn't make the "76" the main heading for this page/component because it isn't very descriptive by itself and doesn't identify the main content or information on the page. A simple span should do instead 🙂

  When deciding which elements to make headings, try to choose elements that describe the content below or around them, rather than elements which just look like headings in the design. Here's a great article that may help you learn more about making semtantic, accessible headings

  Keep coding (and happy coding, too)! 😁

  Marked as helpful

  1