Order summary card

Community feedback

• 

  P

  Jessica•880

  @perezjprz19Posted almost 3 years ago

  Hi Ayush!

  • <p class="card__cancel">Cancel Order</p> --> This should be a link since it is interactive.

  So, I went into the dev tool and made some changes:

  • I added a div with a class stats__pricing that wrapped only around your stats__heading and stats__rate.

  <div class="stats__pricing"><h3 class="stats__heading">Annual Plan</h3><span class="stats__rate">$59.99/year</span></div>

  • I turned your .stats__heading into an h3.

  • Then I added justify-content: space-evenly to the .card__stats in the CSS

  • Removed the left margin of 1 rem from the .stats__heading, so this is all that's left

  .stats__heading { font-weight: 700; color: var(--Dark-blue); }

  • Removed position relative and margins from .stats__rate, so this is all that's left

  .stats__rate { color: var(--Desaturated-blue); }

  Note: I didn't see an H1 in there... preferably I would change the Order Summary to an H1 rather than H2 and then use the H2 for the Annual Plan and use CSS to style it differently.

  Marked as helpful

  1

  ---

  

  AYUSH RANJAN•170

  @aayusranjanPosted almost 3 years ago

  @perezjprz19 thank you much I learned more thing after looking your solution to writing a good code I will improve myself. And thanks for goin through my solution

  0
• 

  Hugo Padilla•210

  @HugoPadillaPosted almost 3 years ago

  You are doing a good job!

  To solve the problem with your text you could do the following:

  1. Wrap your stats__heading and stats__rate element in a div tag and remove their position: relative property.
  2. To the new div element you could use flexbox to create a column and your text that one below the other with the properties:
     • display: flex;
     • flex-direction: column;
     • width:100%
  3. To your card__stats you can add the justify-content: space-between; property.

  he above can be a more organized solution.

  The reason why the text does not expand completely is because it is using the position: relative property that allows you to position it in the place that you want, but this property does not eliminate the element of the flow of the document. That is to say, in the background all the elements are one next to the other occupying a part of the available space in your card__stats.

  The property position: Absolute; if you remove the element from the normal document flow but this is positioned in references to its parent but it is close that has the property position: relative, that is, if in your card__stats you add the property position: relative and change in your stats__heading and stats__rate the property position: relative by position:absolute you solve the inconvenience and only remains to position them properly. But it is a not very elegant and simple solution.

  You can see my solution here:

  and get some management on how I have done it.
  Leave me your comment or feedback if I have helped.

  Marked as helpful

  1

  ---

  

  AYUSH RANJAN•170

  @aayusranjanPosted almost 3 years ago

  @HugoPadilla Appreciate it, for this much details.

  0