pico
pico copied to clipboard
picocss
`.container` should have padding for all breakpoints.
Describe the issue
The elements inside .container need more space around them (padding) when the <body> background color is different:
Current Behavior
Currently, Pico sets the padding of .container to 0 (except for the smallest breakpoint).
- This looks OK if the background color of
<body>and.containermatch.- Pico ensures there is "pseudo" padding by ensuring
max-widthis less than each breakpoint'smin-width.
- Pico ensures there is "pseudo" padding by ensuring
- However, it doesn't look good when the
<body>background color is different:- The elements inside
.containertouch the<body>
- The elements inside
Expected Behavior
The padding of .container should be set to non-zero.
To preserve the layout of existing Pico apps, the "pseudo" padding can be traded for real padding:
- Remove the conditional padding.
- Adjust the
max-widthfor each breakpoint by adding the new padding amount.
Reproduction URL
If a minimal reproduction would help, I would be happy to create one.
Environment
All environments that use any of the larger breakpoints.
