Newbie CSS practice, FlexBox is my best friend.

Community feedback

• 

  RubenRibeiro13•140

  @RubenRibeiro13Posted almost 3 years ago

  Hi @haimmm. The order summary card occupies about 85% of the width on small devices, otherwise it has a width of 450px, so in this case you could achieve a responsive design using the max-width property, as follows:

  .order-summary-card {
  width: 85%;
  max-width: 450px;
  }
  

  Also, the background images are different for small and large devices. To solve this problem, I recommend you read up on media queries.

  0

  ---

  

  Haim Mizrahi•30

  @haimmmPosted almost 3 years ago

  @RubenRibeiro13 Thank you! How could I find those width limitations by myself? This is premium properties only?

  0

  

  RubenRibeiro13•140

  @RubenRibeiro13Posted almost 3 years ago

  Hi @haimmm. I did not use any special features, those values are just an estimate on my part.

  To obtain the max-width, I took a screenshot of the desktop design and pasted it on Paint, then I used the cursor to see the x-coordinates of the card's borders, and finally I subtracted those values.

  As for the width, I obtained the widths of the card and the body using the above method and divided the former by the latter.

  Does this answer your question? I apologize for taking so long to respond.

  0