Breakpoints

Breakpoints are the points at which a website’s layout adapts to different screen sizes.They are a key part of responsive web design, which ensures that users have a consistent and accessible experience on phones, tablets, and desktop computers.

Purpose:

By defining breakpoints, we make sure that page elements — such as navigation menus, text, and images — adjust smoothly as the viewport changes. This helps users interact with content comfortably on any device.

Breakpoints used on InsureKidsNow.gov:

Our site follows device-based breakpoints, which are based on standard screen sizes for mobile, tablet, and desktop devices:

Why it matters:

• Developers use breakpoints to ensure layouts and components adapt properly across devices.
• Designers use them to plan responsive spacing, typography, and grid layouts.
• Content creators should keep breakpoints in mind when adding long titles, wide images, or tables, so the content works well on smaller screens without breaking the layout.

Guidelines:

• Always test new layouts or components on mobile, tablet, and desktop views.
• Follow USWDS grid and breakpoint conventions whenever possible for consistency.
• Avoid fixed widths — use responsive units (like percentages or rems) that adjust automatically.