Responsive Design

Responsive Philosophy

Proyecto Neptuno follows a mobile-first approach where:

Base styles are optimized for mobile devices
Media queries progressively enhance for larger screens
Components adapt gracefully across all viewport sizes

Mobile-first design ensures that the core experience works on all devices, with enhancements for larger screens rather than degradation for smaller ones.

Media Query Breakpoints

The stylesheet uses three main breakpoints:

@media (max-width: 576px)  { /* Small phones */ }
@media (max-width: 768px)  { /* Tablets */ }
@media (max-width: 992px)  { /* Small laptops */ }

576px - Small Mobile
768px - Tablet
992px - Small Laptop

Target: Small phones (portrait)

Key Changes:

Hero H1: 6rem → 2.5rem
Hero H2: 1.1rem → 0.9rem
Page H1: 4.5rem → 2.5rem
CTA buttons: row → column
Form: two columns → single column
Profile tabs: 2x2 grid layout

@media (max-width: 576px) {
    #hero h1 {
        font-size: 2.5rem;
    }
    #hero h2 {
        max-width: 90%;
        font-size: 0.9rem;
    }
    .cta {
        flex-direction: column;
        gap: 10px;
    }
}

Target: Tablets and small screens

Key Changes:

Hamburger menu activates
Navigation becomes slide-out panel
Landing grid: 2 columns → 1 column
Render grids: 2 columns → 1 column

@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }
    
    header nav {
        position: fixed;
        top: 10vh;
        left: -100%;
        width: 100%;
        height: 45vh;
        transition: all 0.4s ease;
    }
    
    #btn-menu:checked ~ nav {
        left: 0;
    }
}

Target: Small laptops and large tablets

Key Changes:

Ocio blocks: 2 columns → 1 column (stacked)
Gastro grid: 3 columns → 1 column
Image detail positioning adjusted

@media (max-width: 992px) {
    .ocio-bloque {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    
    .gastro-grid {
        grid-template-columns: 1fr;
    }
}

The navigation transforms into a hamburger menu on mobile devices using CSS-only solution.

HTML Structure

<header>
    <input type="checkbox" id="btn-menu" />
    <label for="btn-menu" class="hamburger">
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
    </label>
    <nav>
        <!-- Navigation items -->
    </nav>
</header>

CSS Implementation

View Complete Hamburger Menu CSS

/* Hide checkbox */
#btn-menu {
    display: none;
}

/* Hamburger icon (hidden on desktop) */
.hamburger {
    display: none;
    width: 30px;
    height: 20px;
    flex-direction: column;
    justify-content: space-between;
    z-index: 1001;
}

.hamburger .line {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #000;
    border-radius: 3px;
    transition: all 0.3s;
}

/* Mobile: Show hamburger */
@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }
    
    /* Hide nav off-screen */
    header nav {
        position: fixed;
        top: 10vh;
        left: -100%;  /* Hidden left */
        width: 100%;
        height: 45vh;
        background-color: var(--bg-secundario);
        transition: all 0.4s ease;
        border-bottom: 1px solid #e0e0e0;
    }
    
    /* Vertical menu items */
    header ul {
        flex-direction: column;
        justify-content: space-evenly;
        height: 100%;
    }
    
    /* Show menu when checkbox is checked */
    #btn-menu:checked ~ nav {
        left: 0;
    }
}

This hamburger menu uses only CSS (no JavaScript), leveraging the :checked pseudo-class on a hidden checkbox.

Responsive Grid Layouts

Landing Grid

Transforms from two columns to single column:

/* Desktop: 2 columns */
.landing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid #e0e0e0;
}

/* Mobile: 1 column */
@media (max-width: 768px) {
    .landing-grid {
        grid-template-columns: 1fr;
    }
    
    .landing-card {
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
    }
}

Gastro Grid

Three-column layout becomes single column:

/* Desktop: 3 columns */
.gastro-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Tablet: 1 column */
@media (max-width: 992px) {
    .gastro-grid {
        grid-template-columns: 1fr;
    }
}

Ocio Blocks

Image/text two-column layout stacks vertically:

/* Desktop: Side-by-side */
.ocio-bloque {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 70vh;
}

/* Tablet: Stacked */
@media (max-width: 992px) {
    .ocio-bloque {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    
    /* Reverse order for alternate blocks */
    .ocio-bloque--reverse .ocio-bloque__imagen {
        order: -1;
    }
    
    .ocio-bloque__texto {
        padding: 3rem 5%;
    }
}

Responsive Forms

Two-Column Form Layout

/* Desktop: Two columns */
.form-row--two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Mobile: Single column */
@media (max-width: 576px) {
    .form-row--two {
        grid-template-columns: 1fr;
    }
}

Profile Tabs Responsive Layout

/* Desktop: Horizontal tabs */
.profile-tabs {
    display: flex;
    border-bottom: 2px solid #e0e0e0;
}

/* Mobile: 2x2 grid */
@media (max-width: 576px) {
    .profile-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    
    .tab {
        text-align: center;
        border-bottom: none;
        border: 1px solid #e0e0e0;
    }
    
    /* Active tab styling */
    #p-inversor:checked ~ .profile-tabs label[for="p-inversor"],
    #p-marca:checked ~ .profile-tabs label[for="p-marca"],
    #p-prensa:checked ~ .profile-tabs label[for="p-prensa"],
    #p-ciudadano:checked ~ .profile-tabs label[for="p-ciudadano"] {
        background-color: var(--color-primario);
        color: var(--texto-claro);
        border-color: var(--color-primario);
    }
}

Responsive Images

Base Image Styles

All images are responsive by default:

img {
    max-width: 100%;
}

.render-item img,
.ocio-bloque__imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

Detail Image Positioning

The overlaid detail image adjusts on smaller screens:

/* Desktop */
.ocio-bloque__imagen-detalle {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    width: 45%;
}

/* Tablet */
@media (max-width: 992px) {
    .ocio-bloque__imagen-detalle {
        width: 40%;
        bottom: 1rem;
        right: 1rem;
    }
}

Best Practices

Test at Breakpoints

Always test your design at 576px, 768px, and 992px widths

Touch Targets

Ensure interactive elements are at least 44x44px on mobile

Readable Text

Never let body text drop below 0.9rem (14.4px) on mobile

Vertical Rhythm

Reduce padding/margins proportionally on smaller screens

Always test your responsive design on real devices, not just browser dev tools. Touch interactions and viewport behavior can differ.

Responsive Utility Classes

The project uses modifier classes for responsive behavior:

/* Modifier for dark background */
.proyecto-seccion--dark {
    background-color: var(--bg-secundario);
}

/* Modifier for reverse layout */
.ocio-bloque--reverse .ocio-bloque__imagen {
    order: -1;  /* On mobile, image goes first */
}

Testing Checklist

320px - Small Phone

Test with smallest common viewport (iPhone SE)

576px Breakpoint

Verify typography scales and forms stack properly

768px Breakpoint

Ensure hamburger menu activates and grids reflow

992px Breakpoint

Check that two-column layouts stack correctly

1200px+ Desktop

Verify content is properly centered with max-width constraints

Getting Started

Project Structure

Styling

Components

Customization

Responsive Philosophy

Media Query Breakpoints

Key Changes:

Key Changes:

Key Changes:

Hamburger Menu Implementation

HTML Structure

CSS Implementation

Responsive Grid Layouts

Landing Grid

Gastro Grid

Ocio Blocks

Responsive Forms

Two-Column Form Layout

Profile Tabs Responsive Layout

Responsive Images

Base Image Styles

Detail Image Positioning

Best Practices

Test at Breakpoints

Touch Targets

Readable Text

Vertical Rhythm

Responsive Utility Classes

Testing Checklist

Build docs developers (and LLMs) love

Getting Started

Project Structure

Styling

Components

Customization

​Responsive Philosophy

​Media Query Breakpoints

​Key Changes:

​Key Changes:

​Key Changes:

​Hamburger Menu Implementation

​HTML Structure

​CSS Implementation

​Responsive Grid Layouts

​Landing Grid

​Gastro Grid

​Ocio Blocks

​Responsive Forms

​Two-Column Form Layout

​Profile Tabs Responsive Layout

​Responsive Images

​Base Image Styles

​Detail Image Positioning

​Best Practices

Test at Breakpoints

Touch Targets

Readable Text

Vertical Rhythm

​Responsive Utility Classes

​Testing Checklist

Build docs developers (and LLMs) love

Responsive Philosophy

Media Query Breakpoints

Key Changes:

Key Changes:

Key Changes:

Hamburger Menu Implementation

HTML Structure

CSS Implementation

Responsive Grid Layouts

Landing Grid

Gastro Grid

Ocio Blocks

Responsive Forms

Two-Column Form Layout

Profile Tabs Responsive Layout

Responsive Images

Base Image Styles

Detail Image Positioning

Best Practices

Responsive Utility Classes

Testing Checklist