Order Summary Component

Community feedback

• 

  Luis•110

  @Make310Posted almost 3 years ago

  Hello, first, sorry for my bad english.

  you probably have your image inside a div or seccion. all you have to do is add the following code to your div.

  overflow: hidden;

  what this code does is trim everything that comes out of the div, which in this case is the image which overflows the div.

  Marked as helpful

  1

  ---

  

  Isaac•80

  @IsaacCastroCisnerosPosted almost 3 years ago

  @Make310 yes this it

  0

  

  Nicholas Gersbach•310

  @Nick-GersbachPosted almost 3 years ago

  That did it. Thank you!

  0
• 

  Isaac•80

  @IsaacCastroCisnerosPosted almost 3 years ago

  use overflow: hidden to the img and you can see the borders

  Marked as helpful

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  👋 Hi Nicholas!

  Yeah, svg is hard to work with 😅.

  I have some feedback on this solution:

  • Accessibility
    • Create a custom :focus-visible styling to any interactive elements (button, links, input, textarea). This will make the users can navigate this website using keyboard (Tabs) easily.
    • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative only.
  • Other
    • I would recommend using the CSS background property for the wave background. You can put it on the body element. Based on my experience, this approach is much easier since background property can control its size and its position easily.
    • This site is only using the Red Hat Display font family. Why import the Outfit font family?

  * {
    ...
    // 👇 This font family got ignored
    font-family: "Outfit", sans-serif;
    // 👇 Only apply this font family
    font-family: "Red Hat Display", sans-serif;
    line-height: 1.5;
  }
  

  That's it! Hopefully, this is helpful!

  0
• 

  Nicholas Gersbach•310

  @Nick-GersbachPosted almost 3 years ago

  That did it. Thank you!

  0
• 

  Manuel•50

  @ManuelCh02Posted almost 3 years ago

  Hey @Nick-Gersbach

  Great Job! You can add a border-radius to the img tag to top-left and top-right.

  Keep coding!

  0
• 

  Edwin Cacuango•120

  @EdwinCacuangoPosted almost 3 years ago

  You can add border-radius to the img ussign your class ""hero-img. The border only to the top (right and left)

  0