Skip to content
Submitted almost 2 years ago

Mobile first Order summary challenge complete

Nathan Turkson•120
@nathan-codes
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I would appreciate some feedback on best practices for css styling and semantic html.

What didn't I do right? What can I improve? Thanks a lot in advance.

Community feedback

  • yishak abrham•2,150
    @yishak621Posted almost 2 years ago

    good job bro ...but Two basic things 1-the svg background must be dragged upward so use a background-position-y property For example -for large screens

    @media screen and (min-width: 800px) { 
   .center { 
     display: flex; 
     justify-items: center; 
     background: url(./images/pattern-background-desktop.svg) no-repeat top; 
     background-size: contain; 
     background-position-y: -30%;

    2-the background-color should also applied to fill the rest space so use a background-color property for the body or wrapper div

    body { 
   font-family: 'Red Hat Display', sans-serif; 
   margin: 0; 
   background-color: hsl(225, 100%, 94%); 
 }
    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord