Order Summary Component Using Flexbox

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  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

  Marked as helpful

  1

  ---

  

  Angela Moore•170

  @Cyber-ChicPosted over 1 year ago

  @Hassiai

  Thank you!! This is extremely helpful! I'm going to incorporate these changes and watch the CSS tutorial. 😊

  I really appreciate your help - Happy Coding!

  -Angie

  0
• 

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  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!

  Marked as helpful

  1

  ---

  

  Angela Moore•170

  @Cyber-ChicPosted over 1 year ago

  @visualdenniss

  Awesome!! This is very helpful! I'm going to incorporate these changes into my site. 😊

  Thanks Happy Coding!

  -Angie

  0
• 

  Angela Moore•170

  @Cyber-ChicPosted over 1 year ago

  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

  0