> For the complete documentation index, see [llms.txt](https://madeindonesia.gitbook.io/mi-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://madeindonesia.gitbook.io/mi-guide/style-guide/responsive-and-space-guide.md).

# Responsive and space Guide

### Breakpoint

```sass
// Some code
/*-- Breakpoint --*/
$mobile-down: 600px;
$mobile-up: 601px;

$tablet-down: 1024px;
$tablet-up: 1025px;

$laptop-down: 1440px;
$laptop-up: 1441px;
```

For certain case studies, you can customize the breakpoint according to your needs

How to use

```scss
@use '../../base/variables'as v;

.class-name {
   color: blue;
   
   @media (max-width: v.$mobile-down) {
      color: black;
   }
}
```

### Devices to check

Make sure the display of the website is still good at every resolution

![](https://115803331-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F705N8OeBYBxKGzhvaDVF%2Fuploads%2FkHfWz1KMPtS4yN1X7VBa%2Fimage.png?alt=media\&token=dbcc29d4-164e-4c98-9b82-4bced772d41f)

### Space

For space, we should use even number (and it's multiplication, eg: 4,8,12,24,32 etc)

```scss
// BAD
.class-name {
    padding: 3px;
}

// GOOD
.class-name {
    padding: 4px;
}
```