import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Guides/Custom Components/StyledComponents/Breakpoints" />

# StyledComponents: Breakpoints

**Note:** Storybook renders this page inside of an `iframe`! The width taken into account by the media query is that of the `iframe` and not the full viewport window. Hide Storybook's navigation sidebar (or pop out this page) to preview the media query against the full browser width.

---

Import `minWidth` from `@preply/ds-web-core` and use it as a 'mixin':

```ts
import styled from 'styled-components';
import { minWidth } from '@preply/ds-web-core';

export const MyComponent = styled.div`
    display: flex;
    flex-direction: column;

    ${minWidth('medium-l')} {
        flex-direction: row;
    }
`;
```

Alternatively you can assemble the media query by importing the `BREAKPOINT` variable from `@preply/ds-core`:

```ts
import styled from 'styled-components';
import { BREAKPOINT } from '@preply/ds-core';

export const MyComponent = styled.div`
    display: flex;
    flex-direction: column;

    @media (min-width: ${BREAKPOINT['medium-l']}px) {
        flex-direction: row;
    }
`;
```

We recommend using only `min-width` media queries in order to structure your code with a "mobile first" approach.

Check out this [small article (3 min read)](https://medium.com/swlh/use-min-width-not-max-width-in-your-css-e6898fcf6a78) for a quick explanation why.
