# Mobile Optimization Guidelines

**Last Updated:** 2026-03-28

## Overview

This document outlines mobile optimization best practices, common issues, and solutions implemented for the Ordio landing page and website. These guidelines ensure consistent, responsive design across all mobile device sizes.

## Key Principles

### 1. Prevent Horizontal Scrolling

**Problem:** Empty space on the right side, horizontal scrolling on mobile devices.

**Solution:**

- Add `overflow-x: hidden` to `html` and `body` elements
- Set `width: 100%` and `max-width: 100vw` on root elements
- Ensure all containers respect viewport width constraints

**Implementation:**

```css
html,
body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}
```

### 2. Standardize Mobile Padding

**Problem:** Inconsistent padding values (`px-6`, `px-9`, `mx-6`) causing layout issues.

**Solution:**

- Use `px-4` for mobile (16px) - standard mobile padding
- Use `sm:px-6` for small screens and up (24px)
- Use `lg:px-8` or `lg:px-20` for large screens

**Pattern:**

```html
<div class="px-4 sm:px-6 lg:px-8">
  <!-- Content -->
</div>
```

### 3. Container Width Constraints

**Problem:** Containers exceeding viewport width, causing overflow.

**Solution:**

- Always use `max-width` with `mx-auto` for centering
- Add responsive padding to containers
- Use `w-full` with `max-w-*` classes

**Pattern:**

```html
<div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
  <!-- Content -->
</div>
```

### 4. CTA Button Consistency

**Problem:** Buttons with inconsistent padding/margins across devices.

**Solution:**

- Use `w-full` on mobile for full-width buttons
- Add `px-4 sm:px-0` to button containers
- Ensure `max-w-[400px]` is applied with proper padding

**Pattern:**

```html
<div
  class="flex flex-col sm:flex-row w-full max-w-[400px] gap-3 sm:gap-4 px-4 sm:px-0"
>
  <button class="...">Button 1</button>
  <button class="...">Button 2</button>
</div>
```

## Common Issues and Fixes

### Issue 1: Empty Space on Right Side

**Symptoms:**

- White space visible on the right side of mobile screens
- Content doesn't fill the viewport width

**Root Causes:**

- Missing `overflow-x: hidden` on body/html
- Fixed width elements exceeding viewport
- Negative margins or transforms causing overflow

**Fixes Applied:**

1. Added `overflow-x: hidden` to `html` and `body` in `v2/base/head.php`
2. Standardized padding to `px-4` on mobile
3. Added `max-width: 100vw` constraint

### Issue 2: Inconsistent Button Padding

**Symptoms:**

- Buttons have different left/right padding on different devices
- Buttons appear too wide or too narrow

**Root Causes:**

- Inconsistent padding classes (`px-6`, `px-9`, `mx-6`)
- Missing responsive padding breakpoints
- Container max-width without proper padding

**Fixes Applied:**

1. Standardized CTA button container: `px-4 sm:px-0`
2. Ensured buttons use consistent `p-4 px-6` padding
3. Added `w-full` to button containers on mobile

### Issue 3: Hero Section Padding Issues

**Symptoms:**

- Text too close to screen edges on mobile
- Inconsistent spacing between elements

**Root Causes:**

- Mixed use of `mx-6`, `px-9` without responsive variants
- Missing padding on container elements

**Fixes Applied:**

1. Changed `mx-6` to container-level `px-4 sm:px-6`
2. Changed `px-9` to `px-4 sm:px-6`
3. Removed redundant margin classes

### Issue 4: Comparison/Branchen Page CTA Button Placement

**Symptoms:**

- CTA buttons misaligned on mobile devices
- Inconsistent padding between left and right sides
- Buttons not properly centered or left-aligned

**Root Causes:**

- Conflicting wrapper div with `flex lg:block justify-center items-center`
- Wrapper conflicts with CTA component's internal alignment logic
- Missing responsive padding on wrapper

**Fixes Applied:**

1. Replaced `flex lg:block justify-center items-center` wrapper with `px-4 lg:px-0`
2. Fixed 64 comparison pages and 7 branchen pages
3. Standardized centered CTA sections with `px-4 sm:px-6 lg:px-0`
4. Fixed paragraph padding from `px-6` to `px-4 sm:px-6` in testimonial sections

### Issue 5: CTA Button Spacing Before "Täglich genutzt von" Section

**Symptoms:**

- "Rückruf anfordern" button stuck to "Täglich genutzt von +1.700 Unternehmen" text on mobile
- Insufficient spacing between CTA buttons and company logos section
- Poor visual hierarchy on mobile devices

**Root Causes:**

- Missing margin-bottom on CTA wrapper div
- "Rückruf anfordern" button has `mt-4` but no bottom margin on container
- "Täglich genutzt von" section has `mt-0` (no top margin)

**Fixes Applied:**

1. Added `mb-8 sm:mb-12` to CTA wrapper div that appears before "Täglich genutzt von" section
2. Creates proper spacing: 32px on mobile, 48px on larger screens
3. Fixed 49 comparison pages that have the "Täglich genutzt von" section

## Mobile Navigation Menu

The mobile hamburger menu in `v2/base/header.php` follows 2026 UX best practices for compact, accessible navigation.

### Typography

- **Section headers** (Funktionen, Ressourcen, Unternehmen): `text-lg` (18px)
- **Sub-items** (links under each section): `text-base` (16px)
- **CTA block headline**: `text-lg`

### Spacing

- **Header-to-nav**: `mt-5` (20px) between logo row and first menu item; `pt-4` on inner container
- **Section header buttons**: `py-2.5 px-3` with `min-h-[44px]`
- **Sub-item links**: `py-2 px-3` with `min-h-[44px]`
- **Ressourcen/Unternehmen sub-items**: `py-2` with `min-h-[44px]`
- **HR elements**: `my-2` for visual separation
- **CTA block**: `mt-4`, `pt-4 pb-3`, `mb-2` on paragraph
- **Footer links**: `mt-4`, `py-2` with `min-h-[44px]`
- **Copyright**: `mt-3` (12px) above copyright line for separation from footer links

### Touch Targets (WCAG 2.5.8)

- All interactive elements use `min-h-[44px]` to meet 44×44px minimum
- Use `flex items-center` for vertical centering within touch targets

### Chat Widget Overlap

When mobile nav is open, `body` receives `data-mobile-nav-open` attribute. CSS in `head.php` hides `#hubspot-messages-iframe-container` to prevent the HubSpot chat widget from overlapping menu items.

When any **blocking overlay** is active (`ordioLeadCaptureBlocking` ref-count greater than zero), `body` has `data-ordio-blocking-overlay` and the same HubSpot hide rule applies, so the chat does not sit above demo modals, template download modals, tool export email modals, or the lead capture popup. See `docs/systems/lead-capture/TRIGGER_CONFIGURATION.md` (Blocking overlays / HubSpot chat).

## Implementation Checklist

When creating or updating mobile-responsive pages:

- [ ] Add `overflow-x: hidden` to `html` and `body`
- [ ] Use `px-4` for mobile padding, `sm:px-6` for larger screens
- [ ] Ensure all containers have `max-width` with `mx-auto`
- [ ] Test on multiple device sizes (360px, 375px, 390px, 412px, 430px)
- [ ] Verify no horizontal scrolling
- [ ] Check button padding consistency
- [ ] Ensure images/videos use `max-width: 100%`
- [ ] Test logo sliders and animations don't overflow

## Device Testing Matrix

Test on these common device sizes:

| Device            | Width | Height | Status     |
| ----------------- | ----- | ------ | ---------- |
| Samsung Galaxy    | 360px | 640px  | ✅ Tested  |
| iPhone SE         | 375px | 667px  | ✅ Tested  |
| iPhone 12/13      | 390px | 844px  | ✅ Tested  |
| Pixel 7           | 412px | 915px  | ⚠️ Pending |
| iPhone 14 Pro Max | 430px | 932px  | ✅ Tested  |

## Files Modified

### Core Files

- `v2/base/head.php` - Added overflow-x hidden and mobile CSS
- `v2/base/header.php` - Standardized header padding
- `v2/base/include_ctabuttons.php` - Fixed CTA button container padding

### Page Files

- `v2/pages/landingpage.php` - Fixed hero section, containers, logo sliders
- `v2/pages/compare_*.php` (64 files) - Fixed CTA button wrapper divs and padding
- `v2/pages/industry_*.php` (7 files) - Fixed CTA button wrapper divs and padding

## CSS Patterns

### Mobile-First Padding

```css
/* Standard pattern */
.padding-standard {
  padding-left: 1rem; /* 16px - mobile */
  padding-right: 1rem; /* 16px - mobile */
}

@media (min-width: 640px) {
  .padding-standard {
    padding-left: 1.5rem; /* 24px - sm */
    padding-right: 1.5rem; /* 24px - sm */
  }
}

@media (min-width: 1024px) {
  .padding-standard {
    padding-left: 2rem; /* 32px - lg */
    padding-right: 2rem; /* 32px - lg */
  }
}
```

### Container Pattern

```html
<!-- Standard container with responsive padding -->
<div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
  <!-- Content -->
</div>
```

### Button Container Pattern

```html
<!-- CTA buttons with proper mobile padding -->
<div
  class="flex flex-col sm:flex-row w-full max-w-[400px] gap-3 sm:gap-4 px-4 sm:px-0 mx-auto"
>
  <button class="...">Primary</button>
  <button class="...">Secondary</button>
</div>
```

### Comparison/Branchen Page CTA Pattern

**Problem:** Comparison and branchen pages were using a conflicting wrapper div:

```html
<!-- ❌ OLD - Causes alignment issues -->
<div class="flex lg:block justify-center items-center">
  <?php include '../base/include_ctabuttons.php'; ?>
</div>
```

**Solution:** Use simple padding wrapper that doesn't conflict with CTA component's internal alignment:

```html
<!-- ✅ NEW - Proper mobile padding without conflicts -->
<div class="px-4 lg:px-0">
  <?php
    $ctaPositionLeft = 'true';
    $ctaButtonsLight = 'yes';
    $showCallbackButton = 'yes';
    include '../base/include_ctabuttons.php';
    ?>
</div>
```

**For Centered CTAs (ctaPositionLeft = 'false'):**

```html
<!-- ✅ Centered CTA with proper mobile padding -->
<div class="px-4 sm:px-6 lg:px-0">
  <?php
    $ctaPositionLeft = 'false';
    $ctaButtonsLight = 'yes';
    include '../base/include_ctabuttons.php';
    ?>
</div>
```

**Key Points:**

- Never use `flex lg:block justify-center items-center` wrapper - it conflicts with CTA component
- CTA component handles its own alignment via `justify-center mx-auto` when `ctaPositionLeft = 'false'`
- Use `px-4 lg:px-0` for left-aligned CTAs (hero sections)
- Use `px-4 sm:px-6 lg:px-0` for centered CTAs (testimonial sections)
- **Add `mb-8 sm:mb-12` to CTA wrapper when it appears before "Täglich genutzt von" section** for proper mobile spacing

### CTA Spacing Before Company Logos Section

**Problem:** CTA buttons (especially "Rückruf anfordern") appear too close to the "Täglich genutzt von +1.700 Unternehmen" section on mobile.

**Solution:** Add margin-bottom to the CTA wrapper div:

```html
<!-- ✅ CTA wrapper with proper spacing before "Täglich genutzt von" -->
<div class="px-4 lg:px-0 mb-8 sm:mb-12">
  <?php
    $ctaPositionLeft = 'true';
    $ctaButtonsLight = 'yes';
    $showCallbackButton = 'yes';
    include '../base/include_ctabuttons.php';
    ?>
</div>

<!-- Company Logos Section -->
<div
  class="uppercase tracking-widest text-center text-xs mt-0 font-inter600 mb-6"
>
  Täglich genutzt von +1.700 Unternehmen
</div>
```

**Spacing Values:**

- `mb-8` = 32px on mobile (2rem)
- `sm:mb-12` = 48px on small screens and up (3rem)

This ensures proper visual separation between the CTA buttons and the company logos section on all device sizes.

## Browser Testing

### Chrome DevTools

1. Open DevTools (F12)
2. Toggle device toolbar (Ctrl+Shift+M / Cmd+Shift+M)
3. Test on multiple device presets
4. Check for horizontal scrolling
5. Verify padding consistency

### Key Checks

- [ ] No horizontal scrollbar
- [ ] Content fills viewport width
- [ ] Buttons have consistent padding
- [ ] Text doesn't touch screen edges
- [ ] Images/videos scale properly
- [ ] Animations don't overflow

## Sticky Navbar Pattern

**CRITICAL:** The navbar uses `position: sticky` with `top-0` for proper sticky behavior.

**Implementation:**

- Header has `sticky top-0` classes when `$headersticky !== "notsticky"`
- Uses `pt-3` (padding-top) for spacing, NOT `top-3` (which would break sticky)
- Includes `left-0 right-0 w-full` for full-width sticky behavior
- `z-50` ensures navbar stays above content

**Common Issues:**

- **`overflow-x: hidden` on `html`/`body` BREAKS sticky positioning** - This is the most common cause
- Using `top-3` instead of `top-0` with `sticky` will make it stick 12px from top instead of at the top
- Missing `left-0 right-0 w-full` can cause sticky to not span full width
- Parent containers with `overflow: hidden` will break sticky

**Solution:**

- **NEVER use `overflow-x: hidden` on `html` or `body`** - It breaks `position: sticky`
- Use `max-width: 100vw` and container constraints to prevent horizontal overflow instead
- Horizontal overflow is prevented via responsive padding and container max-widths

**Pattern:**

```html
<header
  class="sticky top-0 pt-3 sm:mt-0 z-50 duration-300 px-4 sm:px-6 left-0 right-0 w-full"
>
  <!-- Navbar content -->
</header>
```

**CSS Support (in head.php):**

```css
header.sticky {
  position: -webkit-sticky; /* Safari support */
  position: sticky;
  top: 0;
  z-index: 50;
}
```

**Why overflow-x breaks sticky:**

- When a parent element has `overflow: hidden` (or `overflow-x: hidden`), it creates a new stacking context
- Sticky positioning requires the element to be within a scrollable container
- `overflow-x: hidden` on `html`/`body` prevents the sticky element from working properly
- Solution: Remove `overflow-x` from `html`/`body` and use `max-width: 100vw` + container constraints instead

## Related Documentation

- [Performance Optimization](../performance/PERFORMANCE_OPTIMIZATION.md) - Performance optimization guidelines
- [Performance Monitoring](../performance/PERFORMANCE_MONITORING.md) - Performance monitoring patterns
- [Page Type Guides](guides/PAGE_TYPE_GUIDES.md) - Responsive design patterns for all page types

## Maintenance

### Regular Reviews

- Test on new device sizes as they become popular
- Review padding consistency quarterly
- Check for new overflow issues after major updates
- Update device testing matrix annually

### When to Update

- New page templates created
- Major layout changes
- New component additions
- Browser compatibility issues reported

## References

- [MDN: Responsive Design](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design)
- [Tailwind CSS: Responsive Design](https://tailwindcss.com/docs/responsive-design)
- [Web.dev: Mobile-First](https://web.dev/responsive-web-design-basics/)