☰
Trongate CSS Docs

Responsive Design

Trongate CSS is built with responsive design principles at its core, ensuring websites adapt seamlessly across different device sizes. The framework implements a pragmatic mobile-first approach with a single breakpoint system.

Mobile-First Features

Below is a summary of the key responsive features that are built into Trongate CSS by default:

Responsive Images

Images automatically scale within their containers:

The combination of max-width: 100% and height: auto ensures images scale proportionally without exceeding their container width.

Breakpoint System

Trongate CSS uses a single breakpoint at 550px for mobile adaptations. This streamlined approach simplifies responsive design while covering the most critical layout adjustments.

Mobile Adaptations

At the 550px breakpoint, several UI elements automatically adapt:

Button Stacking

Buttons automatically stack vertically and expand to full width on mobile devices:

On mobile screens (below 550px), these buttons will:

  • Stack vertically
  • Expand to 100% width
  • Maintain proper spacing

Modal Adaptations

Modals receive several mobile-optimized adjustments:

To learn more about how to create dynamic modals, please refer to our Trongate MX documentation. From there, you'll be able to view an entire section on the subject of Building Dynamic Modals.

Button Container Behavior

Button containers automatically adjust their layout on mobile:

Form Elements

Form elements automatically adjust to 100% width of their container while maintaining proper padding and spacing.

When building responsive layouts with Trongate CSS:

  • Test your interface at the 550px breakpoint to ensure proper adaptation
  • Group related buttons together for proper mobile stacking
  • Utilize the built-in image responsiveness instead of fixed dimensions
  • Consider mobile users when ordering stacked elements

Summary

Trongate CSS's responsive features provide:

  • Single breakpoint simplicity at 550px
  • Automatic mobile adaptations for common UI elements
  • Responsive form elements and images
  • Mobile-optimized modals and button containers