Responsive Results/Summary Component SASS

Community feedback

• 

  Luan Barcaça•500

  @barcacaPosted 12 months ago

  Great job on completing the challenge!

  It seems that the desktop version is not displaying correctly because you set the minimum width (min-width) to 1440px

  Here are a few suggestions to enhance your code further:

  • Your media query for the screen width seems to be set for larger screens. Consider adjusting it to @media screen and (min-width: 796px) for better responsiveness.

  .container {
      @media screen and (min-width: 796px) {
          /* Styles specific to larger screens */
      }
  

  -Remove margin-left and add margin-inline: auto:

  .container .summary {
      border-radius: 32px;
      /* Remove margin-left and add margin-inline:auto */
      margin-inline: auto; /* Centering horizontally */
  }
  
  .container .results .circle {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      /* Remove margin-left and add margin-inline:auto */
      margin-inline: auto; /* Centering horizontally */
      background: linear-gradient(hsl(256, 72%, 46%), hsla(241, 72%, 46%, 0));
  }
  

  This adjustment ensures that the elements are centered horizontally without using margin-left. The margin-inline: auto property is a shorthand for setting both margin-left and margin-right to auto, which is commonly used for centering block-level elements

  Good luck with your coding, and keep up the good work!

  0