Order summary component

Community feedback

• 

  P

  Alper•1,010

  @adonmez04Posted about 1 year ago

  Hi, @TKD5. It's a good solution. Keep coding. Here are some important tips.

  1 - I highly recommend to markup your content with HTML first. HTML itself is responsive, so your content will increase and decrease depending on the screen size of the device. You can see this if you to markup your content with HTML without writing any CSS code first.

  2 - When trying to style from CSS, you shouldn't break this HTML behavior. To keep HTML responsive behavior, we can to set the container's max-width value in CSS, so we limit the max-width value of the container, but we don't declare any the width value. With this style, the container itself (and its child elements) will be responsive until its max-width value.

  You can remove all width values from elements. Use only max-width to limit your container element.

  For example:

  container {
      max-width: 450px; /* The desktop width of the container depending on the design file */
      /* width: fit-content; */ /* You don't need this */
  

  @media only screen and (max-width: 376px)
  .container {
      max-width: 327px; /* The mobile width of the container depending on the design file */
      /* width: min-content; */ /* You don't need this */
  

  3 - You also don't need to declare any width and height values for images. Use this declaration block to keep images responsive:

  .top-image {
    max-width: 100%;
    display: block;
    height: auto;
  }
  

  4 - I highly recommend using margin-bottom to give your elements a vertical margin. It's easy to read and understand.

  I hope these will help you. Keep coding and have a wonderful day.

  0