diff --git a/docs/TROUBLESHOOTING.md b/docs/TROUBLESHOOTING.md index d2d14327..a7f41e2e 100644 --- a/docs/TROUBLESHOOTING.md +++ b/docs/TROUBLESHOOTING.md @@ -80,7 +80,77 @@ add_action('wp_head', function() { 2. Check `is_plugin_page()` detection 3. Ensure template has `HVAC_IN_PAGE_TEMPLATE` constant -### 4. Sidebar Still Showing +### 4. Mobile CSS Issues + +#### Modal Overlay Appearing on Page Load +**Symptoms:** +- Non-functional "Apply" button overlay appears on find-trainer page +- Modal visible by default on mobile devices +- Overlay blocks interaction with page content + +**Root Cause:** +- CSS specificity conflict: `display: flex !important` in CSS overrides inline `style="display: none"` +- Modal visibility controlled by both CSS and JavaScript + +**Solution:** +Add `!important` to inline styles in the HTML template: +```html + +
+``` + +Also ensure CSS has proper default state: +```css +/* In assets/css/find-trainer.css */ +.hvac-filter-modal, +#hvac-filter-modal { + display: none !important; + visibility: hidden; + opacity: 0; + pointer-events: none; +} +``` + +**Files Modified:** +- `templates/page-find-trainer.php` (line 535) +- `assets/css/find-trainer.css` +- `assets/js/find-trainer.js` (initialization checks) +- `astra-child-hvac/css/hvac-find-trainer-mobile.css` + +#### Excessive Mobile Padding +**Symptoms:** +- Too much left/right padding on mobile views +- Wasted screen space on small devices +- Content not utilizing full viewport width + +**Solution:** +Set all container padding to 0 on mobile breakpoints: +```css +/* In astra-child-hvac/css/hvac-find-trainer-mobile.css */ +@media screen and (max-width: 768px) { + body.hvac-find-trainer-page .ast-container, + body.page-id-1653 .ast-container { + padding: 0 !important; + margin: 0 !important; + width: 100% !important; + } + + /* Filters section with minimal margins */ + .hvac-filters-section { + margin: 0 5px !important; + padding: 8px !important; + } +} +``` + +**Deployment:** +Use child theme CSS deployment script: +```bash +scripts/deploy-child-theme-css.sh +``` + +### 5. Sidebar Still Showing **Symptoms:** - 2-column layout persists