Order Summary Component (Vanillia CSS)

Community feedback

• 

  Adriano•38,120

  @AdrianoEscarabotePosted about 2 years ago

  Hi James, how are you?

  I really liked the result of your project, but I have some tips that I think you will enjoy:

  To make your challenge more similar to the example layout, we can do this:

  body {
      background: url(image) #E1E9FF;
      background-repeat: repeat-x;
  }
  

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  1
• 

  SD_Voyez•110

  @SD-VoyezPosted about 2 years ago

  Hi !

  First off all, good job :)

  For me the mistake is to use margin-left with your tag <a>, it brokes everything when you reduce screen.

  You should trie to :

  • Remove your margin-left in your tag <a>
  • Put a justify-content : space-arround in your class .extra-card-section

  I tried with your code and it's much better.

  Sorry for my "french" english, hope you understand me :)

  Regards.

  Marked as helpful

  1
• 

  Alex Holguin•410

  @JAleXDesigNPosted about 2 years ago

  Hi Michael, good job!!.. Here are some recommendations: In the .card class, in addition to the "max-width: 25em" you must put a "width: 90%" it can be another percentage depending on the width you want the card to occupy when the screen is not 25em wide.

  If you leave it only with the maximum width, the card will always have that width and will not adapt to mobile devices. The code would look like this and the margin would not be necessary:

    .card {
        max-width: 25em;
        width: 90%;
        margin: 2em 2em 2em 2em; //You can delete this line.
    }
  

  Here is a link on how to shorthand certain css properties CSS - shorthand properties

  Regarding your question about how to put the link on the right, you can wrap the .stack-items container and the "change" link in a "div" like so:

        <div class="extra-card-info">
            <div class="stack-items">
                <p class="bold-dark-blue">Annual Plan</p>
                <p class="desaturated-blue-text">$59.99/year</p>
            </div>
            <a href="#">Change</a>
        </div>
  

  And the css:

      .extra-card-info {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
      }
  

  And you could already delete the media queries and the "margin-left: 7em;" from class .card-extra-section a {}.

  Marked as helpful

  1