Responsive Design - Siloé Perú

Overview

The Siloé Perú website is built with a mobile-first responsive design approach, ensuring optimal viewing and interaction experience across all devices—from mobile phones to desktop computers.

Mobile-First means base styles are written for mobile devices, then enhanced for larger screens using media queries. This approach ensures better performance on mobile devices and progressive enhancement for desktop users.

Responsive Strategy

The website uses three key responsive techniques:

Flexible Grids

CSS Grid with auto-fit and minmax() for automatic column adjustment

Media Queries

Breakpoints at 768px and 480px for tablet and mobile

Flexible Units

rem, %, vh, and vw instead of fixed pixel values

Viewport Meta Tag

The responsive design starts with the viewport meta tag (index.html:6):

index.html

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This ensures:

Page width matches device screen width
Initial zoom level is 1:1
Users can zoom in/out if needed

Breakpoints

The website uses two primary breakpoints:

Desktop (Default)

Base styles assume desktop/tablet landscape (> 768px):

Multi-column grids
Larger typography
Generous spacing
Full-width hero sections

Tablet & Mobile (≤ 768px)

style.css:1620-1663:

style.css

@media (max-width: 768px) {
    /* Navigation buttons */
    .nav-buttons {
        gap: 10px;
    }
    
    .nav-btn {
        padding: 12px 30px;
        font-size: 0.9rem;
    }
    
    /* Typography */
    .hero-title {
        font-size: 2rem;
    }
    
    .clow-hero h1 {
        font-size: 2rem;
    }
    
    .hero h1 {
        font-size: 1.8rem;
    }
    
    /* Forms */
    form {
        padding: 25px;
    }
    
    /* Grids become single column */
    .frases-grid {
        grid-template-columns: 1fr;
    }
    
    .grid-actividades {
        grid-template-columns: 1fr;
    }
}

Small Mobile (≤ 480px)

style.css:1598-1613:

style.css

@media (max-width: 480px) {
    .whatsapp-container {
        bottom: 20px;
        right: 20px;
        gap: 8px;
    }

    .whatsapp-btn {
        width: 55px;
        height: 55px;
    }
    
    .whatsapp-label {
        font-size: 12px;
    }
}

Flexible Grid Layouts

Auto-Fit Grid Pattern

The most powerful responsive pattern used throughout the site:

style.css

.galeria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

repeat(auto-fit, ...)

Creates as many columns as will fit in the available space

minmax(280px, 1fr)

Each column is at least 280px wide, but can grow to fill available space

Automatic Wrapping

When screen gets narrower, columns automatically wrap to next row

Examples by Section

Gallery Grid
Activities Grid
Values Grid

style.css (lines 1356-1362)

.galeria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

Behavior:

Desktop (1400px): ~4-5 columns
Tablet (768px): 2-3 columns
Mobile (375px): 1 column

style.css (lines 238-244)

.grid-actividades {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    max-width: 1000px;
    margin: 40px auto;
}

Behavior:

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

style.css (lines 1073-1077)

.valores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

Behavior:

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

Typography Scaling

Desktop Typography (Default)

.hero h1 {
    font-size: 2.8rem;  /* 44.8px */
}

.clow-hero h1 {
    font-size: 3rem;    /* 48px */
}

h2 {
    font-size: 2.5rem;  /* 40px */
}

Mobile Typography (≤ 768px)

.hero h1 {
    font-size: 1.8rem;  /* 28.8px */
}

.clow-hero h1 {
    font-size: 2rem;    /* 32px */
}

Typography scales down ~30-40% on mobile to ensure readability without overwhelming small screens.

Responsive Images

Flexible Image Sizing

All images use percentage-based sizing:

.galeria-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Background Image Handling

Hero background images adapt to screen size:

style.css (lines 127-141)

.hero {
    background-size: cover;        /* Image covers entire area */
    background-position: center;   /* Center the image */
    background-attachment: fixed;  /* Parallax effect (desktop) */
    min-height: 70vh;             /* At least 70% of viewport height */
}

On mobile browsers, background-attachment: fixed often doesn’t work due to performance reasons. Consider using scroll for mobile:

@media (max-width: 768px) {
    .hero {
        background-attachment: scroll;
    }
}

Button Sizing

Navigation buttons scale appropriately:

Desktop
Mobile (≤ 768px)

style.css (lines 43-56)

.nav-btn {
    padding: 15px 40px;
    font-size: 1rem;
    border-radius: 50px;
}

Large, comfortable click targets

style.css (lines 1626-1629)

.nav-btn {
    padding: 12px 30px;
    font-size: 0.9rem;
}

Slightly smaller to fit on narrow screens

Button Layout

Buttons wrap naturally using flexbox:

style.css (lines 32-40)

.nav-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;  /* Allows wrapping on narrow screens */
    margin-top: 30px;
}

Responsive Forms

Forms adapt gracefully across screen sizes:

Desktop Forms

style.css (lines 793-800)

form {
    max-width: 550px;
    margin: 0 auto;
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

Mobile Forms (≤ 768px)

style.css (lines 1645-1647)

form {
    padding: 25px;  /* Reduced padding for smaller screens */
}

Form Field Sizing

All form fields are 100% width for easy touch interaction:

style.css (lines 361-370)

input, textarea {
    width: 100%;
    padding: 15px;  /* Large tap targets */
    font-size: 1rem;
    box-sizing: border-box;
}

Touch-Friendly Design

Minimum Touch Target Size

All interactive elements meet the 44x44px minimum:

.nav-btn {
    padding: 15px 40px;  /* Well above 44px height */
}

.whatsapp-btn {
    width: 60px;   /* Desktop */
    height: 60px;
}

@media (max-width: 480px) {
    .whatsapp-btn {
        width: 55px;   /* Still above 44px minimum */
        height: 55px;
    }
}

Apple & Android Guidelines: Interactive elements should be at least 44x44 CSS pixels for easy thumb tapping.

Hover vs Touch States

The design uses hover states that also work on touch:

.card:hover {
    transform: translateY(-10px);  /* Also triggered by tap on touch devices */
    box-shadow: 0 10px 25px rgba(41, 171, 226, 0.2);
}

Responsive Spacing

Spacing scales down on smaller screens:

Desktop
Mobile

section {
    padding: 80px 20px;
}

.nosotros-valores {
    padding: 60px;
    margin-bottom: 80px;
}

section {
    padding: 40px 20px;
}

.nosotros-valores {
    padding: 40px 20px;
    margin-bottom: 50px;
}

Large Gallery Items

Special handling for featured gallery items:

style.css (lines 1375-1383)

.galeria-item-grande {
    grid-column: span 1;  /* Mobile: single column */
}

@media (min-width: 900px) {
    .galeria-item-grande {
        grid-column: span 2;  /* Desktop: spans 2 columns */
        grid-row: span 2;     /* Desktop: spans 2 rows */
    }
}

This creates “hero” gallery items on desktop while maintaining a consistent single-column layout on mobile.

Testing Responsive Design

Browser DevTools

Open DevTools

Press F12 or Ctrl+Shift+I (Windows/Linux) / Cmd+Option+I (Mac)

Toggle Device Toolbar

Press Ctrl+Shift+M (Windows/Linux) / Cmd+Shift+M (Mac)

Select Device

Choose from presets:

iPhone SE (375px)
iPhone 12 Pro (390px)
iPad (768px)
iPad Pro (1024px)

Or enter custom dimensions

Test Interactions

Click navigation buttons
Submit forms
Flip cards
Scroll pages

Common Device Sizes

Device	Width	Orientation
iPhone SE	375px	Portrait
iPhone 12/13	390px	Portrait
iPhone 12 Pro Max	428px	Portrait
iPad	768px	Portrait
iPad	1024px	Landscape
Desktop	1920px	Landscape

Real Device Testing

Always test on real devices! Browser DevTools are helpful but don’t perfectly replicate:

Touch interactions
Scrolling behavior
Font rendering
Network conditions

Performance on Mobile

Optimized Images

Consider these optimizations for mobile:

<!-- Use srcset for responsive images -->
<img 
    src="image.jpg"
    srcset="image-400w.jpg 400w,
            image-800w.jpg 800w,
            image-1200w.jpg 1200w"
    sizes="(max-width: 768px) 100vw, 50vw"
    alt="Description"
>

CSS Performance

Minimize Reflows

Avoid animating layout properties (width, height, margin, padding). Prefer transforms.

Use will-change

For frequently animated elements:

.galeria-flip-card {
    will-change: transform;
}

Reduce Complexity

Simpler layouts paint faster on mobile devices

Lazy Load Images

Use loading="lazy" for below-the-fold images

Accessibility Considerations

Focus States

Ensure keyboard navigation works:

.nav-btn:focus {
    outline: 2px solid var(--azul-siloe);
    outline-offset: 2px;
}

Text Contrast

Verify text meets WCAG AA standards (4.5:1 contrast ratio):

body {
    color: var(--gris-oscuro);  /* #333 on white = 12.6:1 ✓ */
}

Zoom Support

Allow users to zoom:

<!-- ✓ Good: Allows pinch-zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- ✗ Bad: Disables zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

Best Practices

Mobile-First CSS

Write base styles for mobile, enhance for desktop

Touch Targets

Minimum 44x44px for all interactive elements

Flexible Units

Use rem, %, vh, vw instead of fixed px

Test Early

Test on real devices throughout development

Performance

Optimize images, minimize CSS, defer JavaScript

Progressive Enhancement

Ensure core functionality works without JavaScript

Next Steps

Setup Guide

Get your development environment ready

Styling Guide

Learn the CSS architecture

Image Customization

Optimize and customize images

Form Component

Understand form implementation

Guides

Customization

​Overview

​Responsive Strategy

Flexible Grids

Media Queries

Flexible Units

​Viewport Meta Tag

​Breakpoints

​Desktop (Default)

​Tablet & Mobile (≤ 768px)

​Small Mobile (≤ 480px)

​Flexible Grid Layouts

​Auto-Fit Grid Pattern

​Examples by Section

​Typography Scaling

​Desktop Typography (Default)

​Mobile Typography (≤ 768px)

​Responsive Images

​Flexible Image Sizing

​Background Image Handling

​Responsive Navigation

​Button Sizing

​Button Layout

​Responsive Forms

​Desktop Forms

​Mobile Forms (≤ 768px)

​Form Field Sizing

​Touch-Friendly Design

​Minimum Touch Target Size

​Hover vs Touch States

​Responsive Spacing

​Large Gallery Items

​Testing Responsive Design

​Browser DevTools

​Common Device Sizes

​Real Device Testing

​Performance on Mobile

​Optimized Images

​CSS Performance

Minimize Reflows

Use will-change

Reduce Complexity

Lazy Load Images

​Accessibility Considerations

​Focus States

​Text Contrast

​Zoom Support

​Best Practices

Mobile-First CSS

Touch Targets

Flexible Units

Test Early

Performance

Progressive Enhancement

​Next Steps

Setup Guide

Styling Guide

Image Customization

Form Component

Build docs developers (and LLMs) love

Overview

Responsive Strategy

Viewport Meta Tag

Breakpoints

Desktop (Default)

Tablet & Mobile (≤ 768px)

Small Mobile (≤ 480px)

Flexible Grid Layouts

Auto-Fit Grid Pattern

Examples by Section

Typography Scaling

Desktop Typography (Default)

Mobile Typography (≤ 768px)

Responsive Images

Flexible Image Sizing

Background Image Handling

Responsive Navigation

Button Sizing

Button Layout

Responsive Forms

Desktop Forms

Mobile Forms (≤ 768px)

Form Field Sizing

Touch-Friendly Design

Minimum Touch Target Size

Hover vs Touch States

Responsive Spacing

Large Gallery Items

Testing Responsive Design

Browser DevTools

Common Device Sizes

Real Device Testing

Performance on Mobile

Optimized Images

CSS Performance

Accessibility Considerations

Focus States

Text Contrast

Zoom Support

Best Practices

Next Steps