order-summary-card with Html and css

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hi, Uday! 👋

  It looks like you are using the BEM (Block Element Modifier) methodology as your class naming convention. order__price--plan is a valid BEM however, it is not used to be a child element. It's used as a modifier.

  For example, let's say you have a button class. Then, to modify the size of the button, you use the modifier class such as button--large. That's how the modifier class works.

  I recommend making a card block instead of order. Then, make all elements inside the card as the elements of the card (card__heading, card__button). For the modifier, you might want to try card__button--block to make the button fill the entire width (e.g. "Proceed to payment" button).

  One suggestion I have is to not wrap the img with picture element. picture element is used to offer different versions of the image. For example, you can use picture element when there are three images for different devices (e.g. mobile, tablet, desktop).

  I hope this helps! Happy coding!

  Marked as helpful

  1