Order summary component using HTML and CSS

Community feedback

• 

  Anis•135

  @anisgoPosted about 3 years ago

  hello, change the h2 tag to h1 and add font-family: "Big Shoulders Display". and font-family: "Lexend Deca" in p tag

  Marked as helpful

  0
• 

  T

  Mike Hayden•1,005

  @mickygingerPosted about 3 years ago

  Hi Greeshma! 👋

  First of all, this looks great, so well done! 🎉

  You're always going to have difficulties when using absolute positioning for layout, so I would strongly advise against it. Absolute positioning is good when you want to position something over the top of something else, and in relation to it. If you look at the notification bell icon on Frontend Mentor, you'll see that there's a red notch that appears indicating how many unread notifications you have. That's absolutely positioned, but mostly we use flexbox or grid to position our elements on the page.

  You can position your order summary component by with flexbox like so:

  body {
    margin: 0;
  }
  
  .main-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
  }
  

  Then remove position: absolute and left: 36% from .sub-block.

  Here's a great guide to flexbox by CSS-Tricks.

  Hope that helps! 😀

  Marked as helpful

  0

  ---

  

  Greeshma•10

  @greeshmaymPosted about 3 years ago

  @mickyginger The link you have provided is very helpful, I will definetly improvise the code.Thank you so much for taking time and giving me a feedback.

  0