Frontend Mentor - Order summary card

Community feedback

• 

  Abhishek choudhary•1,570

  @dazzlerabhi30800Posted over 2 years ago

  Try changing the font size in smaller screens, put your container inside main tag and lastly use h2 instead of h4 or you can use span tag also.This will take care of the responsiveness and accessibility issues.

  Marked as helpful

  0
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Luis, congratulations for your new solution!

  Here's some tips for you:

  The card container has a different size, use max-width: 340px to keep the container with its original size and responsive when the mobile version gets active.

  .container {
      max-width: 340px;
      margin: 0 auto;
      padding-top: 2.5em;
      padding-inline: 1rem;
  }
  

  The only reason your component is not RESPONSIVE is due the fixed width youve set for the card, button and pricing section. To fix this behavior all you need to do is replace the width with max-width. Note that the difference between these two properties is that width is fixed, example, width: 340px is an container that doesn't get bigger or smaller than 340px but max-width: 340px have the maximum of 340px and can contract when the screen scales down and adjust its size.

  👋 I hope this helps you and happy coding!

  Marked as helpful

  0