Order summary component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Ly Dinh, congratulations for your solution!

  Answering your question:

  1.You clean your code deleting the <section> and use the <main> that's wrapping this section and the other contents, the section doesn't have an important role in this context, the <main> tag is enough to hold all the card content.

  2.To center your component quickly you can use flexbox inside the body and the container, using the flex properties to align and min-heigh: 100vh; to allow your card to align the screen center and display 100 of viewport height. See the example below:

  body {
      display: flex;
      font-family: 'Red Hat Display', sans-serif;
      align-items: center;
  }
  
  .card {
      display: flex;
      flex-direction: column;
  }
  

  3.Use flex-wrap: wrap; to avoid the .card-plan section to have all the text too much close, the flex-wrap will break the line. Or use a media query to change flex-direction to column.

  @media (max-width: 280px) {
  .card-plan {
      display: flex;
      flex-direction: column;
  }}
  
  Hope it helps. Happy coding.
  

  Marked as helpful

  1

  ---

  

  Ly Dinh Minh Man•260

  @winprnPosted over 2 years ago

  @correlucas Hi, thank you for your instruction. What I want to do with my p.card-detail is just make it positions a little bit to the right than the button below it (it's just a small detail when you look at the design). I tried flex-wrap: wrap but it doesn't change anything. I'm adding padding of 80px to both sides right now but I think there's a better way to do it. Any other suggestions? Thank you very much.

  0

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @winprn you can use a media query with flex-direction: column inside the .card-plan, but the icon should be in a separate level to stay over all the over elements when the media query gets active.

  1

  

  Ly Dinh Minh Man•260

  @winprnPosted over 2 years ago

  @correlucas thank you! I'll try it

  1