Order summary component

Community feedback

• 

  Fer•3,970

  @fernandolapaz

  Posted about 2 years ago

  Hi 👋, perhaps some of this may interest you:

  HTML:

  • The use of the <picture> element does not apply in this case since it is a single image, use <img> simply.

  CSS:

  • It would be better to add the pattern-background images directly to the body in CSS (using background-image like you did). No html code needed.

  To switch from one image to another, a media query @media would be required.

  Maybe something like this:

  body {
  background-color: var(--Pale-blue);
  background-image: url(images/pattern-background-mobile.svg);
  background-repeat: no-repeat;
  background-size: contain;
  }
  
  @media screen and (min-width: 500px) {
  body {
  background-image: url(images/pattern-background-desktop.svg);
  }
  

  • It is better to use min-height: 100vh; for the body, as using height causes the page to be cut off in viewports with small height (such as mobile landscape orientation). Also, there's no need to set a width to 100vw, as block elements are full width by default.

  Please let me know if you want more info on any of these topics or disagree with something. I hope it’s useful 🙂

  Regards,

  00

  Marked as helpful