Margins on article about pico HOT 6 CLOSED

This is a deliberate choice.
Typography, Container and Cards provide responsive sizes and margins.

You can disable all responsive spacings in the config file (line 16).

from pico.

I felt the same margins on large screens, and since I wanted a CSS solution without build steps, the mention of SCSS almost made me look for a different micro framework. It turned out however that this can be easily achieved with CSS variables. Leaving this here in case someone stumbles on the same issue:

      @media (min-width: 1200px) {
        body > footer,
        body > header,
        body > main,
        section {
          --block-spacing-vertical: calc(var(--spacing) * 2); /* default is var(--spacing) * 4 */
        }
      }

from pico.

I guess my argument is that the spacings are too much for larger devices. The responsiveness is good but you end up wasting a lot of space? Maybe it's just me :)

from pico.

I this case, you can fine tune the "spacing factor" in pico in the config file (line 135). 🙂

For example:

$spacing-factor: (
  xs: 1,
  sm: 1.125,
  md: 1.25,
  lg: 1.375,
  xl: 1.5
);

from pico.

Here is an example scss file to compile your own pico version.

from pico.

I think I ended up doing this actually and forked (even though I know nothing about sass!) Thanks :)

from pico.