# Services 4-6 Responsive Layout Fix

## The Problem

Services 4, 5, and 6 were **left-aligned and small** on mobile devices instead of being **full-width and centered** like services 1, 2, and 3.

### Visual Issue:
```
DESKTOP (Correct):
[Service 4] [Service 5] [Service 6]  ← 3 columns, 33.33% each

MOBILE (WRONG):
[Svc4] [Svc5] [Svc6]                 ← Left-aligned, small, squished
           [empty space]             ← Lots of wasted space

MOBILE (SHOULD BE):
    [Service 4]                      ← Full width, centered
    [Service 5]                      ← Full width, centered
    [Service 6]                      ← Full width, centered
```

---

## Root Cause Analysis

### Issue #1: Missing flex-basis in Mobile CSS

**Location:** Line ~1533 in preview.php

**WRONG CODE:**
```css
@media screen and (max-width: 767px) {
    #row-services-456 .lfl-column {
        width: 100% !important;
        /* ❌ Missing: flex property! */
    }
}
```

**The Problem:**
The desktop CSS sets:
```css
#row-services-456 .lfl-column {
    flex: 0 0 auto;  /* flex-grow: 0, flex-shrink: 0, flex-basis: auto */
    width: 33.3333% !important;
}
```

When mobile CSS only changes `width` to 100% but doesn't change `flex`, the column has:
- `width: 100%` ← Says "be 100% wide"
- `flex: 0 0 auto` ← But flex-basis is `auto`, which uses the content size!

**Result:** The column uses its content size instead of 100% width! 💥

---

### Issue #2: Left Alignment

**WRONG CODE:**
```css
#row-services-456 .lfl-columns-wrap {
    display: flex;
    justify-content: flex-start;  /* ❌ Always left-aligned */
}
```

**The Problem:**
This makes columns align to the left on ALL screen sizes. When combined with the flex-basis issue, small columns bunch up on the left side.

---

## The Complete Fix

### Location: preview.php, lines ~1513-1565

Replace the entire `<style>` block with this corrected version:

```css
<style type="text/css">
/* Ensure services 4-6 columns match the width of services 1-3 */
#row-services-456 .lfl-columns-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
}

#row-services-456 .lfl-column {
    flex: 0 0 auto;
    width: 33.3333% !important;
    box-sizing: border-box;
}

/* Tablet responsiveness */
@media screen and (max-width: 991px) and (min-width: 768px) {
    #row-services-456 .lfl-column {
        width: 50% !important;
        flex: 0 0 50% !important; /* ✅ ADDED: Match flex-basis to width */
    }
}

/* Mobile responsiveness - FIXED */
@media screen and (max-width: 767px) {
    #row-services-456 .lfl-columns-wrap {
        justify-content: center !important; /* ✅ ADDED: Center columns */
    }
    
    #row-services-456 .lfl-column {
        width: 100% !important;
        flex: 0 0 100% !important; /* ✅ CRITICAL FIX: Set flex-basis to 100% */
    }
    
    /* ✅ ADDED: Center all content inside */
    #row-services-456 .lfl-elementsAdded {
        align-items: center !important;
    }
}

/* Ensure equal height columns */
#row-services-456 .lfl-columnInner {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#row-services-456 .lfl-elementsAdded {
    flex-grow: 1;
}

/* Better text formatting for ALL service descriptions (rows 1 and 2) */
#row-646d4452559bb .lfl-paragraph-element,
#row-services-456 .lfl-paragraph-element {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Improve text rendering and prevent awkward line breaks */
#row-646d4452559bb .lfl-paragraph-element p,
#row-services-456 .lfl-paragraph-element p {
    text-align: center !important;
    text-align-last: center !important;
}
</style>
```

---

## What Changed (Detailed)

### Change #1: Mobile Flex-Basis ⭐ CRITICAL
```css
/* BEFORE */
@media screen and (max-width: 767px) {
    #row-services-456 .lfl-column {
        width: 100% !important;
    }
}

/* AFTER */
@media screen and (max-width: 767px) {
    #row-services-456 .lfl-column {
        width: 100% !important;
        flex: 0 0 100% !important; /* ← ADDED THIS LINE */
    }
}
```

**Why this fixes it:**
- `flex: 0 0 100%` means:
  - `flex-grow: 0` (don't grow beyond 100%)
  - `flex-shrink: 0` (don't shrink below 100%)
  - `flex-basis: 100%` (base size is 100% of container)
- Now the column MUST be 100% wide!

### Change #2: Mobile Center Alignment ⭐ IMPORTANT
```css
/* ADDED THIS */
@media screen and (max-width: 767px) {
    #row-services-456 .lfl-columns-wrap {
        justify-content: center !important;
    }
}
```

**Why this matters:**
- Centers the service cards horizontally
- Makes layout match services 1-3
- Looks more professional on mobile

### Change #3: Center Content Inside ⭐ POLISH
```css
/* ADDED THIS */
@media screen and (max-width: 767px) {
    #row-services-456 .lfl-elementsAdded {
        align-items: center !important;
    }
}
```

**Why this helps:**
- Centers images, text, and buttons inside each service card
- Matches the centering behavior of services 1-3
- Professional appearance

### Change #4: Tablet Flex-Basis (Bonus Fix)
```css
/* BEFORE */
@media screen and (max-width: 991px) and (min-width: 768px) {
    #row-services-456 .lfl-column {
        width: 50% !important;
    }
}

/* AFTER */
@media screen and (max-width: 991px) and (min-width: 768px) {
    #row-services-456 .lfl-column {
        width: 50% !important;
        flex: 0 0 50% !important; /* ← ADDED THIS LINE */
    }
}
```

**Why include this:**
- Prevents the same flex-basis issue on tablets
- Ensures 2-column layout works correctly
- Consistency across all breakpoints

---

## Testing Checklist

After applying the fix, test these scenarios:

### Desktop (>992px)
- ✅ Services 4-6 should appear in 3 columns
- ✅ Each column should be ~33% wide
- ✅ Content should be centered
- ✅ Should match services 1-3 layout

### Tablet (768px - 991px)
- ✅ Services 4-6 should appear in 2 columns
- ✅ Each column should be 50% wide
- ✅ Second row should have 1 centered service
- ✅ Should match services 1-3 layout

### Mobile (<768px)
- ✅ Services 4-6 should stack vertically
- ✅ Each service should be FULL WIDTH
- ✅ Each service should be CENTERED
- ✅ Images, text, buttons should all be centered
- ✅ Should match services 1-3 layout exactly

---

## Why Services 1-3 Worked Fine

Services 1-3 don't have custom flex CSS - they use the global responsive CSS from styletwo.css:

```css
@media screen and (max-width: 767px) {
    .lfl-column {
        width: 100% !important;
        flex: unset !important; /* ← This works correctly */
    }
}
```

The global CSS has `flex: unset !important;` which removes the flex constraints entirely, allowing `width: 100%` to work properly.

Services 4-6 had **more specific CSS** (`#row-services-456 .lfl-column`) that **overrode the global CSS**, but it was incomplete!

---

## Technical Explanation: Flexbox Priority

### CSS Specificity (What Overrides What)
```
#row-services-456 .lfl-column     ← ID + class (specificity: 110)
      BEATS
.lfl-column                        ← Just class (specificity: 10)
```

**Result:** The specific `#row-services-456` CSS overrides the global `.lfl-column` CSS.

### The Flex Property Breakdown
```css
flex: 0 0 auto;
```
Expands to:
```css
flex-grow: 0;        /* Don't grow beyond flex-basis */
flex-shrink: 0;      /* Don't shrink below flex-basis */
flex-basis: auto;    /* Use content size OR width property (whichever is larger) */
```

With `flex-basis: auto` and `width: 33.333%`, the column was using content size instead of width!

**The Fix:**
```css
flex: 0 0 100%;
```
Means:
```css
flex-basis: 100%;    /* Base size is 100% of parent - IGNORES CONTENT SIZE */
```

Now `width: 100%` AND `flex-basis: 100%` work together! ✅

---

## Quick Fix Summary

**ONE WORD ANSWER:** Add `flex: 0 0 100% !important;` to mobile CSS.

**THREE CHANGES:**
1. Mobile: `flex: 0 0 100% !important;`
2. Mobile: `justify-content: center !important;`
3. Mobile: `align-items: center !important;` (for elementsAdded)

**RESULT:** Services 4-6 now match services 1-3 perfectly on all devices!

---

## Before & After Comparison

### BEFORE (Broken Mobile Layout)
```
Screen width: 375px (iPhone)

+--[Svc 4]-[Svc 5]-[Svc 6]-------+ ← Squished, left-aligned
|                                 |
|         [empty space]           |
|                                 |
+---------------------------------+
```

### AFTER (Fixed Mobile Layout)
```
Screen width: 375px (iPhone)

+--[   Service 4 Card   ]--------+ ← Full width, centered
+--[   Service 5 Card   ]--------+ ← Full width, centered  
+--[   Service 6 Card   ]--------+ ← Full width, centered
```

Perfect! 🎉

---

## Files Provided

1. **services-456-fixed-css.html** - The corrected CSS (copy into preview.php)
2. **SERVICES_456_FIX_DOCUMENTATION.md** - This document

---

## Installation

### Step 1: Locate the Code
Open `preview.php` and find line ~1513 (search for: `#row-services-456`)

### Step 2: Replace the Style Block
Replace the entire `<style type="text/css">` block (from line ~1513 to ~1565) with the contents of `services-456-fixed-css.html`

### Step 3: Save & Test
1. Save the file
2. Clear browser cache (Ctrl+Shift+R)
3. Test on mobile (resize browser to <768px width)
4. Verify services 4-6 are now full-width and centered

---

## Troubleshooting

### "Still not working on mobile"
- **Check:** Browser cache cleared?
- **Check:** Viewing correct campaign?
- **Check:** Copied entire style block including media queries?
- **Check:** Browser width is actually <768px?

### "Works on Chrome but not Safari"
- Should work on all modern browsers
- Try adding `-webkit-` prefixes if needed (unlikely)

### "Columns are TOO wide now"
- Check for typos in the CSS
- Make sure `!important` flags are present
- Verify `flex: 0 0 100%` (not `flex: 0 0 auto`)

---

**Result:** Perfect responsive layout matching services 1-3! 🚀