Order summary card using html and css

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  Hello there 👋. Good job on completing the challenge !

  • In your case, you're trying to apply a border-radius to a parent container (<main>), but the child image (<img class="hero">) is overflowing the parent's boundary.

    Adding overflow: hidden; to the parent container is one way to make sure the child elements follow the rounded corners. It will clip any content or child elements that extend beyond the boundary of the parent container.

    This would look like:

    main {
      background-color: white;
      border-radius: 1em;
      overflow: hidden; /* Added this line */
    }
    
    .hero {
        max-width: 100%;
        /* border-top-left-radius: 1em; */
        /* border-top-right-radius: 1em; */
    }
    

  I hope you find it useful! 😄

  Happy coding!

  Marked as helpful

  3

  ---

  

  IrieBee•280

  @IrieBeePosted over 1 year ago

  @MelvinAguilar Really appreciate it! It worked!

  1