ORDER SUMMARY USING HTML AND SASS

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hi! 👋

  Good effort on this challenge! 👍

  Here are some suggestions for improvements.

  • The "change" is an interactive element. So, it should be wrapped by an interactive element. It could be either a or button, depending on what you think will happen after the users click it.
  • For your information, anchor tags are for navigation, while the button elements are for actions like opening a modal, submitting a form, toggling element, etc. It is essential to use the correct elements.
  • input with type="button" was used before the button element exist. It's best to avoid using legacy elements. So, I recommend using button element instead.
  • For images that are used only as decorations (they do not give users any information and serve only an aesthetic purpose), the alt tag should still exist but should be left empty: alt="". This will tell the screen reader to simply skip over the image.
  • Never limit the height of the body element. It will not allow the users to scroll the page if the page content needs more height. You can see the issue by looking at the site on a mobile landscape view. So, my recommendation is to use min-height instead.
  • Never use 100vw on the body as it doesn't account for scrollbars when present. It may only ever introduce potential overflow/scroll bugs.
  • Use the em unit for media queries. It adapts when the users change their font size setting. Here are some references.
    • @media - CSS: Cascading Style Sheets | MDN #accessibility_concerns
    • PX, EM or REM Media Queries?

  I hope this helps! Happy coding!

  0
• 

  Adriano•39,210

  @AdrianoEscarabotePosted about 2 years ago

  Hi IJEOMA NNAEMEKA PASCAL, how are you?

  I really liked the result of your project, but I have some tips that I think you will enjoy:

  To prevent the background image from breaking at higher resolutions, we can prevent this in two different ways:

  1. Add a background-repeat: repeat-x;, the image will repeat on the horizontal axis, preventing it from breaking.

  2. Add a background-size: 100% 50vmin;, the 50vmin will set its height as the page target, and 100% will make it stretch on the horizontal axis.

  Feel free to choose one of the two!

  The rest is great!

  I hope it helps... 👍

  0

  ---

  

  IJEOMA NNAEMEKA PASCAL•280

  @iamdrmekaPosted about 2 years ago

  @AdrianoEscarabote

  Would you mind checking the code to see if I added the background the right way?

  0

  

  Adriano•39,210

  @AdrianoEscarabotePosted about 2 years ago

  @iamdrmeka do this:

  body {
      background-image: url("./images/desktop.svg");
      background-repeat: repeat-x;
  }
  

  0

  

  IJEOMA NNAEMEKA PASCAL•280

  @iamdrmekaPosted about 2 years ago

  @AdrianoEscarabote

  Okay. Thanks. How do I merge it with the other color?

  0