📓

Responsive Design

Meet Castos Sign In 14-Day Free Trial

Who we are

📓What we stand for️📓Our Purpose📓Our Vision📓Our Mission📓Our Values

Design System

📓Design Principles📓Colors📓Typography📓Images

Content Guide

📓What is a Content Guide📓Writing goals and principles📓Tips for writing at Castos

Component Library

📓About our Components📓Button

Logos & Assets

📓Castos📓Castos Productions📓Castos Academy📓Audience Podcast📓3 Clips Podcast
⚡
Meet Castos →

© Castos 2022 – v0.4

Responsive Design

How we make our pages responsive.

Breakpoints

We use Tailwind’s breakpoints and follow a mobile-first approach.

Breakpoint prefix
Minimum width
CSS
sm
640px
@media (min-width: 640px) { ... }
md
768px
@media (min-width: 768px) { ... }
lg
1024px
@media (min-width: 1024px) { ... }
xl
1280px
@media (min-width: 1280px) { ... }

Our largest breakpoint is 1280px.

Container

Use the custom-container class to center the main section of a page and add 16px of horizontal padding. It sets the max-width of an element to match the min-width of the current breakpoint.

Sizing elements

Fonts should be two sizes bigger when the sm breakpoint is reached. For example:

  • Breakpoints smaller than 640px, font size is 14px.
  • Breakpoints larger than 640px, font size is 16px.
  • Responsive Design
  • Breakpoints
  • Container
  • Sizing elements