Order Summary Component Using Flexbox

To center .whiteblock on the page using flexbox, replace the height in the body with min-height: 100vh.

You forgit to give the button a box-shadow.

For a responsive content, replace the width in .whiteblock with max-width and increase it value for it be equivalent to the design. max-width:432px

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

This challenge requires a media query, in the media query you have to change the background-image of the body.

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Hey there Angela,

nice work! Regarding media, u can do it simply with

• @media only screen and (max-width: 375px) { body { background: url() } }

• You can add a background color change on button hover and color change when hovering on links (e.g. button::hover , a::hover) to indicate interactivity of the elements to the user and improve user experience.

• Try to avoid giving fixed heights or max-heights for text containing elements like you have for .card, even if it is in rem, because it can cause issues later on (with changing dynamic data, when the user changes font-sizes, or even browser rendering issues etc.)

• Screenshots are taken on a Firefox browser and 1440px, it might be that your default settings are different, (zoom, scale, resolution etc.) so there is some difference, but i wouldn't worry about it much, as long as your solution looks good enough, its good. After all, these challenges are not about being pixel-perfect.

Hope you find this feedback helpful!

I also noticed that my uploaded designs looks much bigger when I'm editing them, but then look significantly smaller once I post my solution. Any tips for making sure that I size these correctly?

Thanks!

-Angie