PWD Atoms CSS

Resize browser window to see media-queries' classes kick in. Back to tutorial & download page.

This box has:
  • 20px padding, exept for small screens (up to 767px wide). On small screens pagging is 10px.
  • 30px top margin, exept for small screens (up to 767px wide). On small screens top margin is 0px.
  • 30px bottom margin on small screens (up to 767px wide)
  • borders on all sides, exept for small screens (up to 767px wide). On small screens it has no top border.
  • borders radius of 24px on all sides, exept for small screens (up to 767px wide). On small screens all corners are sharp (no border radius). Also, on screens over 1200px wide, top left corner is sharp.
This box has:
  • 20px padding, exept for small screens (up to 767px wide). On small screens pagging is 10px.
  • 50px top margin, exept for small screens (up to 767px wide). On small screens top margin is 0px.
  • borders on all sides, exept for small screens (up to 767px wide). On small screens it has no bottom border.
  • borders radius of 24px on all sides, exept for small screens (up to 767px wide). On small screens all corners are sharp (no border radius). Also, on screens over 1200px wide, top right corner is sharp.
This box has:
  • 20px padding, exept for small screens (up to 767px wide). On small screens pagging is 10px.
  • 30px top margin, exept for small screens (up to 767px wide). On small screens top margin is 0px.
  • 30px bottom margin on small screens (up to 767px wide)
  • borders on all sides
  • borders radius of 24px on all sides, exept for small screens (up to 767px wide). On small screens all corners are sharp (no border radius). Also, on screens over 1200px wide, bottom left corner is sharp.