Order summary component - CSS Grid, Flexbox, SASS

Community feedback

• 

  Sandro•1,150

  @sandro21-glitch

  Posted over 2 years ago

  Hi Leandro

  Here are some suggestions to improve the code

  You can use CSS to ensure that a background image fills the full screen, regardless of screen size. Here's an example:

  body { background-image: url(your-background-image.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; height: 100vh; }

  In this example, background-size: cover makes sure the background image covers the entire screen, while background-position: center centers the image within the screen. The height property set to 100vh sets the height of the body to 100% of the viewport height, so the background image covers the entire screen.

  Happy Coding

  00

  Marked as helpful
• 

  Hassia Issah•50,410

  @Hassiai

  Posted over 2 years ago

  the background fills the entire width of the screen. there is no need fothe background- position.

  There is is no need for the height in .component rather give .cmpnt-text a padding value for ll the sides. this a responsive replacement of that.

  To center .component on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

  To center .component on the page using flexbox:
  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  To center .component on the page using grid:
  body{
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  00

  Marked as helpful