Order Summary Component - HTML/CSS only

Community feedback

• 

  hitmorecode•6,680

  @hitmorecodePosted about 1 year ago

  Nice well done. For this challenge there is no actually a mobile version, you just need to make it so the card still fits on a small screen size. I have a few suggestions.

  • You don't have to use max-width on the body, you'll need this later on when you have to use containers.
  • Margin on the body is not necessary, you can remove it
  • Change the background properties to this to fix the background image.

  background: var(--clr-primary-paleblue)
      url(../images/pattern-background-desktop.svg) no-repeat;
      background-size: contain;
  

  Marked as helpful

  1

  ---

  

  P

  Julie•150

  @jclegg31Posted about 1 year ago

  @hitmorecode thank you for the feedback and the help! I updated the code and I'll get that back up to github here shortly.

  Question for you, so why does FEM give you those parameters for the layout. That the designs were created with the mobile and desktop widths? I feel like they are a clue/guide to something and I never know when to use them. Or do I just ignore them?

  Thanks!

  0

  

  hitmorecode•6,680

  @hitmorecodePosted about 1 year ago

  @jclegg31 Glad I could help. As for your question the width that they give us is, because there are challenges with more content than just a card. To make things look good we have to place the content inside a container and the container must have a width of 1440px on desktop and 375px on mobile.

  So if you are doing a challenge with just one card, then you don't have to stick to this rule of max width 1440px. Just make sure that the card looks good on desktop and mobile

  Marked as helpful

  1

  

  P

  Julie•150

  @jclegg31Posted about 1 year ago

  @hitmorecode Thank you! That is super helpful!

  0