css, html 5, css grid

Community feedback

• 

  Rajaul Islam Ratul•1,250

  @ratul0407Posted over 1 year ago

  Hey there Joshua Carter, congrats on completing the challenge 🎉🎉

  I see that you've ran down to a lot of problems but it's easy to fix 👍

  let's walk down through all of your problems together✌

  #1 The component isn't at the middle of the page you can fix it by just giving the body a display of grid and place content of center and with a minimum height set to 100 view heights

  body {
  display:grid;
  place-content:center;
  min-height: 100vh;
  }
  

  #2 The result container which you have set the class of left side needs a gradient instead of a single color

  .left-side {
  background: linear-gradient(
   var(--Light-slate-blue-background),
   var(--Light-royal-blue-background));
  }
  

  #3 the 76 also needs to be updated the div with a class of circle

      background: 
  linear-gradient(
   var(--Violet-blue-circle),
   var(--Persian-blue-circle));
  

  #4 you should lower the opacity of the summary items like make the opacity 0.3 or 0.2 what you feel like better. 0.3 worked fined I think so I went with that one. Do it for all of the rows form one to four

  .row-two {
      background-color: hsl(59, 70%, 86%, 0.3);
  

  And don't use pixels for setting the font size height or width always use rems and don't use width auto on everything and yeah ✔✔

  I hope it helped you a little Have a nice day :D

  Marked as helpful

  0

  ---

  

  joshua carter•240

  @taylor003Posted over 1 year ago

  @ratul0407 very helpful, i will update those codes and see the result.

  1
• 

  Jordan Martin•190

  @JordanMartinWebDevPosted over 1 year ago

  Hey joshua, So it looks like the area where your results are, the padding is all off. Looks like it's doing a stair step rather than being in line with consistent padding for all the results. Also, I see you're missing the gradients for the left side of the card. You do a gradient in CSS like this "background: linear-gradient(hsl(252, 100%, 67%), hsl(241, 81%, 54%));" that's one from this project (for the button hover and the main gradient of the left pane), however there is another in the project I'll leave you to figure out which goes on the circle that is behind the overall result.

  Marked as helpful

  0