Responsive Design and Grid System

Hugo FortyTen uses Tailwind CSS to create a fully responsive grid system that adapts beautifully to any screen size. Whether your readers are on mobile, tablet, or desktop, your content always looks perfect.

Responsive Breakpoints

The theme uses standard Tailwind breakpoints:

Mobile (base): < 640px - Single column layouts
Tablet (sm-md): 640px - 1024px - Two to three columns
Desktop (lg+): ≥ 1024px - Full multi-column layouts

Grid System Architecture

Posts Grid

Posts display in a responsive grid:

Mobile:  1 column
Tablet:  3 columns
Desktop: 3 columns

Configure the number of posts per page in hugo.yaml:

params:
  postsPerPage: 9

The grid automatically reflows based on screen width.

Homepage Hero

The hero section (with Treta!) uses a flexible row layout:

Mobile:  Stacked (image below text)
Desktop: Side-by-side (image to the right)

Uses flex-col md:flex-row for seamless adaptation.

Content Cards

All content cards maintain consistent spacing:

Padding: 1.5rem on all sides
Gap: 1.5rem between cards
Border radius: 8px for softness
Shadow: Subtle drop shadow for depth

Mobile-First Approach

The theme follows Tailwind’s mobile-first philosophy:

Base styles apply to mobile
sm:, md:, lg: prefixes add breakpoint-specific overrides
Larger devices build on mobile styles

For example, header spacing:

<header class="pt-4">           <!-- mobile: 1rem top padding -->
  <div class="container mx-auto py-8">  <!-- all screens: 2rem vertical padding -->

Container and Spacing

Container

Max width: 1200px (container class)
Horizontal padding: 1rem on all screens
Centered: mx-auto for perfect alignment

Spacing Scale

FortyTen uses consistent Tailwind spacing (4px increments):

Padding/margins: 4px, 8px, 12px, 16px, 24px, 32px, etc.
Gaps between grid items: 24px
Section spacing: 48px

Typography Scaling

Text sizes scale with screen size:

Headings: Larger on desktop, readable on mobile
Body text: Always 16px base size for readability
Line height: 1.5-1.75 for comfortable reading

Images in Content

Images are fully responsive:

<img class="max-w-full h-auto" src="..." />

Scales down on mobile
Maintains aspect ratio
Never exceeds container width

Best Practices for Your Content

When creating content for FortyTen:

Use descriptive images - They scale beautifully
Keep paragraphs readable - Short lines on mobile
Use headings liberally - They improve scannability
Test your layouts - Check mobile, tablet, and desktop views
Optimize images - Smaller files load faster on mobile

Testing Responsiveness

To test your site’s responsiveness:

Run hugo server
Open your browser’s developer tools (F12)
Toggle device toolbar (Ctrl+Shift+M or Cmd+Shift+M)
Test at mobile, tablet, and desktop sizes

Customizing Breakpoints

To modify breakpoints, edit tailwind.config.js:

theme: {
  extend: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
    }
  }
}

The FortyTen grid system makes creating responsive, beautiful layouts effortless. Your readers will enjoy perfect viewing on any device! 📱💻

Hugo FortyTen Theme