Order Summary - Using HTML,CSS,Flexbox + Normalize

Community feedback

• 

  Rachel Mozzetta•135

  @Mozzarella-chzPosted about 3 years ago

  Hey nice work! I am a TOTAL newb so please bear with me as I provide feedback and questions to your project....

  1. I was messing around with 'inspect' and noticed that when i was resizing my browser horizontally the elements within div.info collapsed in on themselves causing the elements to stack atop one another. This 'collapsing' happened at about 850px. My thought is that maybe you need to utilize flex? (I think...? Again I am a total newb.....)

  here is what i would add .info{ display: flex; flex-wrap: wrap; }

  div.row{ display:flex

  ... and then you could put Annual plan and $59.99 into its own div as a child of div.row? From there you would need to put the Music.img and the newly created div (Annual plan + $59.99) inline with one another... There are alot of different ways to do that: https://morioh.com/p/84b3ea38043c

  Not sure if any of that makes sense or is enough to get you at least started with a possible solution to your 'flex issue'....

  Good luck to you on your coding journey!!!

  Additionally my suggestion is to create a separate div for the background image.

  Marked as helpful

  2

  ---

  

  MaryF•350

  @JanselinPosted about 3 years ago

  @Mozzarella-chz thanks a lot for your feedback, that was very helpful! I noticed my project has many issues,i'm gonna try to fix them all following your tips! :)

  1
• 

  nmorajda•945

  @nmorajdaPosted about 3 years ago

  Good, but IMHO too many div elements:

  Example 1:

  <div class="info">
    <h1>Order Summary</h1>
   <div class="paragraph">
      <p>You can now listen to millions of songs, audiobooks, and podcasts on any device anywhere you like!</p>
  </div>
  

  What's this div.paragraph for?

  Example 2:

  <div class="payment">
    <ul>
      ...
  

  Why not right away:

  <ul class="payment">
    ...
  

  There is also a problem with responsiveness.

  However, these are errors / problems that you will definitely deal with.

  Happy coding.

  Marked as helpful

  1

  ---

  

  MaryF•350

  @JanselinPosted about 3 years ago

  @nmorajda thank you so much for your feedback. I agree , after posting the resolution I noticed the issues with the responsiveness, I'm still learning about it so I'm not 100% great at it!

  And yeah,I'll try to delete some divs hehe

  0