Replication of Order Summary Challenge using HTML and CSS.

Community feedback

• 

  President Tree•360

  @PresidentTreePosted about 3 years ago

  Good job on your first Frontend Mentor submission! Here is some feedback...

  • Concerning the positioning, there are a few ways to do it. You can format it like Reydel Ocon suggests using display: grid;, you can do a similar method using display: flex;, justify-content: center;, and align-items: center; which is what I do, or you can make the whole thing position: absolute; and use the transform: translate(-50%, -50%); method that you found. The reason for the transformation is because you are positioning the element relative to the top-left corner of it, so the -50% (or 50% if you use right and bottom instead of left and top) adjusts it to the actual center.
  • I would avoid using sizing in pixels since they aren't as responsive. Use rem instead. There are online converters you can use, such as this one.
  • While color names are easier, colors could be interpreted differently depending on the device. I would recommend using the colors in HSL format like the challenge gives you or RGB. The same goes for the hexadecimal colors.
  • You box-shadow around the payment button should only be on the bottom side. This can be done by changing the 30px to a lower number or increasing 2px.

  As for screen responsiveness, what of it are you struggling with? Do you not know how to do it? The best way to do it? I would be happy to help you if you reply.

  Marked as helpful

  0

  ---

  

  Samia Mahwash•170

  @Mahwash-AlyPosted about 3 years ago

  @PresidentTree Thank you for your detailed feedback. I will try to change the solution as you suggested. The issue I am having with responsiveness is that when I view it in mobile view(425px), it loses all the padding on sides. It occupies all the screen width and doesn't leave room for background img to be visible.

  0

  

  President Tree•360

  @PresidentTreePosted about 3 years ago

  @SamiaMahwash The margin (not padding, that's the inside) disappears because there isn't enough space for that screen size. Using percentages for margins also is not the most efficient method.

  0

  

  Samia Mahwash•170

  @Mahwash-AlyPosted about 3 years ago

  @PresidentTree Got it! Thank You.

  0
• 

  Reydel Ocon•385

  @reydelshitPosted about 3 years ago

  in my case, I solved that using grid by setting the body to 100vw then display: grid; place-items: center; to the container

  Marked as helpful

  0
• 

  Harmanjot Singh•985

  @arkharman12Posted about 3 years ago

  Great job on your first challenge other than the changes mentioned above! :)

  0
• 

  avestereye•0

  @avestereyePosted about 3 years ago

  Font family on the buttons are not the same also the shadow under button are not simmilar your colors also do not matching.

  0

  ---

  

  Samia Mahwash•170

  @Mahwash-AlyPosted about 3 years ago

  @avestereye Oh yes. I totally forgot about the buttons' font. About shading, I couldn't find the exact match.

  0
• 

  Reydel Ocon•385

  @reydelshitPosted about 3 years ago

  nice bro

  0