Responsive order summary card with scss

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. The desktop layout seems a bit bigger but is fine, it resize as well and looks fine in mobile.

  For the scss functions, I think Conrad already suggested a good resource.

  Some suggestions on the website would be:

  • Do not position: absolute the .flex-container element. If you inspect your website in dev tools, then hover on the body tag, you will see that the body doesn't have any dimension, because its content, the .flex-container is out of the flow. If you are centering the card, instead of using position: absolute, take a look at below stylings:

  First, on the .flex-container, remove all these stylings:
  {
      position: absolute; */
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      margin: 1rem auto 0;
  }
  
  Then on the body tag, add these 
  body {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: adjust to your preference but add padding
  }
  

  Those styling above will dynamically centers your content. Also, the min-height: 100vh ensures that the body tag will have enough height to align the content vertically. Also, height: 100vh is different to min-height: 100vh okay, the min-height is much much better. Do not use the height: 100vh.

  • On the img for the card, I would use alt="" on it, because it is just for decoration and it is just a vector image.
  • I would wrap the annual plan in a heading tag, because if I navigate in it using screen reader, I would know that the next content will/could be the price of my "plan".
  • On the proceed to payment it would be better for the a tag to occupy the whole size of the div parent, so that users can click as well on the blue bar and trigger the link. Right now, even if you click on the blue bar, it doesn't make anything.

  Aside from those, really great work on this one.

  Marked as helpful

  0

  ---

  

  Branden Evans•20

  @BrandenEvansWDPosted about 3 years ago

  @pikamart Thank you so much for the tips. I struggled to get the card center and just used that horrible hacky method so thank you for that. Fixed everything I believe while also getting rid of some of my deprecated scss thanks to another @conrad's video suggestion.

  0
• 

  Conrad•950

  @ConradMcGrifterPosted about 3 years ago

  check out this video by Kevin Powell on how to use @forward and @use link to video

  Marked as helpful

  0
• 

  Kelvin•915

  @Kl3vaPosted about 3 years ago

  This comment was deleted about 3 years ago

  0

  ---

  

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  @Kl3va nodemon is used for backend.

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  @Kl3va nodemon? nodemon is for starting and restarting the server from backend I think you have a separate script that builds the scss. nodemon doesn't do compiling

  0