Responsive
Responsive Design allows users to access content across multiple device resolutions. We use Sass (with the SCSS variant) for easier maintenance.
Breakpoints
In the Appwrite console we use three screen ranges (small / medium / large):
| Screen Size | Range | Scss Variable |
|---|---|---|
| Small | 0px - 767px |
$break1
|
| Medium | 768px - 1198px |
$break2
|
| Medium (open) | 768px - Infinite |
$break2open
|
| Large (open) | 1199px - infinite |
$break3open
|
CSS Implementation
SCSS Code
Sass Variables Breakpoints in Media Queries Rule
Special Use Cases
In some use cases, we might want to affect only a part of screen sizes and not all of them. In Pink Design responsive library, there is no overlap between the different resolutions. As shown in the example below, you can affect more than one screen size by adding breakpoints.
Example of a SCSS Partial
Compiled CSS