Order Summary Component with React

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  • In devices with a width of 320px, the decorative image is not displayed. Always check your solution in devices up to 320px wide, as this width is recommended to avoid losing any type of information on a website.

  • Your mobile-image is showing in desktop devices, this issue is likely due to the order of your media queries. Media queries are read by the browser from top to bottom, and the last one that matches the current screen size will be applied.

    A possible solution (index.style.css):

    body {
        background-color: #e0e8ff;
        background-repeat: no-repeat;
        background-image: url("../assets/images/pattern-background-mobile.svg");
        font-family: Red Hat Display,sans-serif;
        background-size: contain; /* Use contain instead of cover*/
    
        /* background-position: top; */
        /*font-size: 16px;*/ /* The default font size is 16px and use font-size in rem*/
        /* justify-content: center; */
    }
    
    @media (min-width: 720px) {
        body {
          background-image: url("../assets/images/pattern-background-desktop.svg");
        }
    }
    
     /* Remove all this media query */
    @media (min-width: 375px) {
        body {
          /* background-image: url("../assets/images/pattern-background-mobile.svg"); */
        }
    }
    

  I hope you find it useful! 😄

  Happy coding!

  Marked as helpful

  1

  ---

  

  Galih Arizza•230

  @chadittyaPosted almost 2 years ago

  @MelvinAguilar Hello Melvin, as always your feedback is helping me improve, thank you! I appreciated it!

  1