Order summary component

Community feedback

• 

  Elaine•11,360

  @elaineleung

  Posted almost 3 years ago

  Hey Jennifer, good job in attempting this challenge. Regarding the button, I'd first remove the max-height and change the padding, then add a width of 100%:

  .button { width: 100%; padding: 1rem; // be sure to remove the max-height! }

  There are a number of positioning and sizing issues that are greatly affecting the responsiveness of your site. What I would do is:

  • Remove the width: 32vw on the section element
  • In the body element, add a display: grid and place-content: center to center the entire component. You can also use flex box if you like.
  • For annualPlan, add the following: padding:1rem; margin-bottom: 2rem; align-items: center;
  • For the "change" link, add grid-row: 1/3;
  • For the h2, add grid-row: 1/2;
  • Remove the margin-bottom: 3vh; on the "$59.99/year"
  • Change the height: 100vh to min-height: 100vh. If you have a fixed height of 100vh and you have a lot of content, the viewport would only give you 100vh, and your content would appear stretched across the browser. Using a min height means that for content shorter than the viewport, the content should stretch to a minimum height of 100vh, and for content that's longer than the viewport (meaning it would be greater than 100vh), you can still scroll down since there is no fixed height.
  • Actually, just remove ALL the margins and sizes where you're using viewport units and percentages :)

  I get the sense that you're either starting to learn about CSS and HTML or that you've learned quite a fair bit and now finally putting that knowledge to practice. Either way, I encourage you to keep practicing, and based on what I saw in your code, maybe the biggest tip I can give you is to use rem units instead of viewport units and percentages until you're more proficient in CSS.

  Good luck!

  10
• 

  David Oncu•350

  @david-oncu

  Posted almost 3 years ago

  Congratulations on your solutions! There are many ways to fix the button and the 'Change' button here are my suggestions:

  For the "Proceed to Payment" button add:

  body section .container footer .firstButton { width: 100%; display: grid; padding: 1rem 2rem; }

  For the "Change" add:

  body section .container main .annualPlan a { margin-top: 0.5rem; }

  00
• 

  Ahmad_Mana•320

  @UserAhmad2001

  Posted almost 3 years ago

  Hello jennifer I took a quick look at your solution I saw that you have only used some basic types of display like inline or block You shoud use "flex" and "grid" display more often, i use them all the time. doing that makes the design easier and more responsive (looks good on different screen sizes).

  plus there are some html mistakes you should solve ex: 1.at the process payment button, you nested a button inside an anchor link doing that complicates the design process, you should either put a link or a button . 2.at the change text you nested a span inside the anchor link that's unneeded. 3. you put some un-semantic tags header for img, and section as a container.

  best regards ahmad

  00