Responsive Order Summary Card using Flexbox, Google Fonts, and Media Q

Hi there, congratulations on completing the challenge. You've done a good job with this one... 🥳

I have taken a look at your live preview and source code. Let me share some of my suggestions to help you improve your current solution.

• Use class for styling components rather than the element/tag selector. When working on big projects, classes can be a lifesaver. Using tags can make it complex and confusing as it applies to all instances of the specified tag.
• The "Change" link should not be wrapped inside p tag. It is a link and should only be wrapped in an a tag.
• You can have the buttons use the same font as the rest of the body by using an inherit in the CSS:

body {
font-family: "Red Hat Display", sans-serif;
}

button {
font-family: inherit;
}

• There's an easier way to center something vertically and horizontally on a page by using display: flex:

.container {
display: flex;
justify-content: center;
align-items: center;
}

But, you need to move the card's elements into a new container.

<div class="container">
<div class="card">
... EVERYTHING INSIDE THE CARD GOES HERE ...
</div>
</div>

• Import Google Fonts inside the HTML. This is better for the website's performance.
• Use CSS Variables/Custom Properties to improve reusability across your CSS. Here's how you can create variables:

:root {
--font-main: "Roboto", sans-serif;

--weight-light: 300;
--weight-regular: 400;
--weight-bold: 700;

--color-white: #fff;
--color-black: #000;
}

Learn more about variables here

• Never* use pixels to set your font size. Here's why

Hope you find these helpful in improving your solution, Happy coding! 😄