# Quick Fix Reference - Services 4-6 Mobile Responsive

## 🔍 Find This Code (Line ~1530-1538 in preview.php)

```css
/* Mobile responsiveness */
@media screen and (max-width: 767px) {
    #row-services-456 .lfl-column {
        width: 100% !important;
    }
}
```

## ✅ Replace With This Code

```css
/* Mobile responsiveness - FIXED */
@media screen and (max-width: 767px) {
    #row-services-456 .lfl-columns-wrap {
        justify-content: center !important;
    }
    
    #row-services-456 .lfl-column {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    #row-services-456 .lfl-elementsAdded {
        align-items: center !important;
    }
}
```

---

## 📋 Complete Style Block Replacement

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

### REPLACE THIS ENTIRE BLOCK:

```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;
    }
}

/* Mobile responsiveness */
@media screen and (max-width: 767px) {
    #row-services-456 .lfl-column {
        width: 100% !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>
```

---

### WITH THIS FIXED BLOCK:

```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 */
    }
}

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

/* 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 (Line by Line)

| Line | Change | Why |
|------|--------|-----|
| Tablet (~1527) | Added `flex: 0 0 50% !important;` | Ensures 2-column layout works |
| Mobile (~1533) | Added entire wrapper block | Centers columns horizontally |
| Mobile (~1537) | Added `flex: 0 0 100% !important;` | **CRITICAL:** Makes columns full width |
| Mobile (~1540) | Added entire elementsAdded block | Centers content inside cards |

---

## 📊 Visual Changes

### Desktop (>992px) - No Change
```
Before: [Service 4] [Service 5] [Service 6]
After:  [Service 4] [Service 5] [Service 6]
```

### Tablet (768-991px) - Minor Improvement
```
Before: [Service 4] [Service 5]
        [Service 6]

After:  [Service 4] [Service 5]
        [  Service 6  ]  ← Better centering
```

### Mobile (<768px) - MAJOR FIX ⭐
```
Before: [S4][S5][S6]        ← Squished, left
        [empty space]

After:  [   Service 4   ]   ← Full width, centered
        [   Service 5   ]   ← Full width, centered
        [   Service 6   ]   ← Full width, centered
```

---

## ⚡ The Critical Line

This ONE line fixes the main issue:

```css
flex: 0 0 100% !important;
```

Without it: columns use content size ❌
With it: columns use 100% width ✅

---

## ✅ Verification

After making the change:

1. **Save** preview.php
2. **Clear browser cache** (Ctrl+Shift+R)
3. **Resize browser** to mobile width (<768px)
4. **Check:** Services 4, 5, 6 are now:
   - ✅ Full width
   - ✅ Centered
   - ✅ Stacked vertically
   - ✅ Match services 1, 2, 3

---

## 🔧 How to Test

### Chrome DevTools Method
1. Right-click page → Inspect
2. Click device toggle icon (Ctrl+Shift+M)
3. Select "iPhone 12 Pro" or similar
4. Scroll to services section
5. Verify services 4-6 are full width

### Browser Resize Method
1. Make browser window narrow (<768px wide)
2. Scroll to services section  
3. Verify services 4-6 match services 1-3

---

## 🎉 Done!

After this fix, services 4-6 will be **perfectly responsive** on all devices!