Order Summary Component Full Responsive using VITE + REACT JS + SASS

Community feedback

• 

  Venus•1,640

  @VenusYPosted 9 months ago

  Good job on this challenge! You've done well replicating the layout and design of the original design.

  I did notice a few minor things, however.

  The div wrapper element that you've put the hero image inside seems redundant from what I can see. You've only set a width and a height on it, both of which you've also set on the image itself.

  You could achieve the desired layout by removing this .photo element and allowing the hero image to be a direct child of the .card element.

  When the page switches to the smaller layout, the hero image gets slightly distorted because the height of the image is hard-coded to 200px, while the width of it is allowed to change with the width of the card.

  One way you could fix this issue is to add object-fit to the image like so:

  .background .card .photo img {
    object-fit: cover;
  }
  

  Setting this property to cover allows the image to fill its container while maintaining its aspect ratio, but it results in part of the image being cut off.

  If you don't like this side effect, then you can try an alternative method, which is to allow the height of the image to change dynamically.

  This would require you to remove the height property on the img element:

  .background .card .photo img {
    height: 200px; ❌
  }
  

  I also noticed that, if you shrink the width of the viewport enough, you run into an issue where the background no longer takes up the entire viewport.

  If you set the background on the body element, then you can avoid this issue:

  body {
    background: url(data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1440'%20height='437'%3e%3cpath%20fill='%23D6E1FF'%20fill-rule='evenodd'%20d='M0%20349.974c218.558%20116.035%20460.05%20116.035%20724.475%200s502.933-116.035%20715.525%200V0H0v349.974z'/%3e%3c/svg%3e), #e0e8ff;
    background-repeat: no-repeat;
    background-size: 100% 350px;
  }
  

  In order for this solution to work properly, you also have to remove the background property on the .background element, as well as remove the .imgdesk element.

  Other than that, well done once again for completing this challenge! I wish you luck on your coding journey.

  Hope this has been helpful! :)

  0