Order summary using CSS Grid and flexbox

Community feedback

• Account deletedPosted over 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • The "illustration" and “music icons” in this component are purely decorative. ⚠️ Their alt tag should be left blank to hide them from assistive technology.

  More Info:📚

  https://www.w3.org/WAI/tutorials/images/

  • The only heading ⚠️ in this challenge is the ”Order Summary". Every other text should wrapped in a paragraph element.

  • To properly apply ✅ the border-radius to this component, add it to the component’s container along with overflow:hidden .

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding! 🎆🎊🪅

  00

  Marked as helpful
• Account deletedPosted over 2 years ago

  Hello!

  You applied a margin on every p element:

  .container  p {
      text-align: center;
      color: #747895;
      font-size: 1.1rem;
      margin: 0px 50px;
  }
  

  So your p element on the plan div took it as well. You can make a declaration with a child combinator:

  .container > p {
      text-align: center;
      color: #747895;
      font-size: 1.1rem;
      margin: 0px 50px;
  }
  

  or add a class on every p that you want to modify, then your price will be on it's place. You just need to change that justify-content: space-around on the infobox CSS or move the plan div to the image div.

  You can take a look on your developer tools, on the "computed" page to check for margins/paddings, etc.

  01

  Marked as helpful
• 

  Kyrylo Haiduk•420

  @superpooperxxx

  Posted over 2 years ago

  Hi, don't worry it is easy to fix🔥

  • First of all get rid off <div class ="image"> and this <div> <div><a href="">Change</a></div>. They are just redundant.

  • In your css try doing following: In .infobox remove this line justify-content: space-around; Give this <a href="">Change</a> some class and in css add align-self: flex-end

  Happy coding ❤️ Hope this was helpful

  If not, let me know !

  01

  Marked as helpful
• 

  Hassia Issah•50,390

  @Hassiai

  Posted over 2 years ago

  Use the colors that were given in the styleguide.md found in the zip folder you downloaded.

  To center .container on the page, using grid, change the value of the min-height: 100vh.

  Add a background-size of contain to the body for the background-image to stretch the entire width of the body.

  The payment button has a wrond box-shadow color.

  There is no need for justify-content in .infobox, add a gap to .infobox and give . plan a margin-right of auto, this will put the change at the right-end of .infobox. .infobox={ gap: 10px} .plan{margin-right: auto;}

  Reduce the max-width value of .container for it to fit into smaller screens. max-width: 400px; .

  This challenge requires a media query, in the media query you only have to change the background-image of the body.

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  01

  Marked as helpful