<aside> 💡 Display in pxCode, common techniques for adjusting responsive behavior.

</aside>

https://www.loom.com/share/b99f79a04b6c451794ebcd169b1016bf?sid=6edfc872-ae3e-40b4-97bf-9a01cd720738

Margin + Size

  1. To center the content on larger screens
    1. set the max-width property to px
    2. setmargin-left and margin-right to auto.
  2. Globally set the content width to a fixed value in pixels (px).
  3. For smaller screens, set the content width as a percentage (%).

https://www.loom.com/share/59c90041c144486299635c940619f0a6?sid=72a0f010-c1ca-440f-9ff3-286fa35effd7

Flex

  1. When the screen size becomes smaller, set the flex-direction property from row to column.
  2. Also, set the align-items property to center.
  3. Add a row-gap.