Amazium uses a mobile-first responsive system to ensure layouts and components scale consistently across screen sizes. Styles are applied to smaller screens by default and progressively enhanced using min-width media queries.
Breakpoints define the screen widths at which layouts and components adapt to larger viewports.
| Breakpoint: | Device Type: | Min-Width: |
|---|---|---|
| Mobile HD | Large smartphones | 420px |
| Tablet | Tablets & small laptops | 750px |
| Desktop | Standard desktops | 1000px |
| Desktop HD | Large desktop screens | 1200px |
Breakpoints are used to adjust layout, spacing, and component behaviour as screen size increases. This includes grid changes, visibility utilities, and component scaling.
Media queries follow a consistent mobile-first pattern using min-width conditions.
/* Mobile-first approach: Default styles apply to all devices */
/* Mobile HD - Applies from 420px onwards */
@media (min-width: 420px) {
/* Styles for larger smartphones */
}
/* Tablet - Applies from 750px onwards */
@media (min-width: 750px) {
/* Styles for tablets and small laptops */
}
/* Desktop - Applies from 1000px onwards */
@media (min-width: 1000px) {
/* Styles for standard desktops */
}
/* Desktop HD - Applies from 1200px onwards */
@media (min-width: 1200px) {
/* Styles for high-resolution desktops */
}