Get In Touch

Have a Question? Speak With an Expert.

Get in Touch

11200 SW Allen Blvd Suite 200
Beaverton, OR 97005

(503) 924-4434

contact@ssnwllc.com

Common FAQs

# SSNW DiPI Advanced Tabs — Mobile UX Fix **Client:** Strategic Solutions NW (`ssnwllc.com`) **Applies to:** All service pages using the DiPI Advanced Tabs widget **Tested at:** 390px viewport (iPhone) on `/expertise/finance-optimization/` --- ## What this fixes 1. **No swipe indication** → animated "‹ › swipe to navigate" hint on load 2. **Confusing default arrows** → original plugin `«»` arrows hidden entirely 3. **Arrows overlapping dividing line** → same arrows hidden, line is now clean 4. **Can't swipe from body copy** → full-widget touch swipe handler added 5. **"Next: [Tab Name]" indicator** → contextual link at bottom of each panel 6. **"1 of 4" pagination** → counter in nav row updates with every tab change 7. **New clean prev/next buttons** → circular `‹`/`›` flanking counter + dots 8. **Right margin too tight** → module inner padding set to `24px 20px` --- ## Installation ### Step 1 — Custom CSS **Divi → Theme Options → General → Custom CSS** (or any site-wide CSS location) ```css /* ===================================================== SSNW — DiPI Advanced Tabs mobile UX fix Scope: @media (max-width: 980px) ===================================================== */ @media (max-width: 980px) { /* 1. Fix right margin / padding */ .dipi_advanced_tabs .et_pb_module_inner { padding: 24px 20px !important; } /* 2. Hide default plugin prev/next arrows entirely */ .dipi-at-tabs-prev, dipi-at-tabs-next { display: none !important; } /* 3. Clean up slider overflow */ .dipi-at-tabs-slider-container { overflow: hidden !important; position: relative; } .dipi-at-tabs-slider { overflow: hidden !important; } /* 4. Pagination nav row: ‹ 1 of 4 ● ○ ○ ○ › */ .ssnw-tab-nav-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px 0 4px; } .ssnw-tab-btn { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid #2d5be3; background: transparent; color: #2d5be3; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; padding: 0; } .ssnw-tab-btn:disabled { opacity: 0.3; cursor: default; } .ssnw-tab-btn:not(:disabled):active { background: #2d5be3; color: #fff; } .ssnw-tab-counter { text-align: center; font-size: 12px; color: #7a8499; letter-spacing: 0.04em; min-width: 36px; } .ssnw-tab-dots { display: flex; align-items: center; gap: 7px; } .ssnw-tab-dot { width: 8px; height: 8px; border-radius: 50%; background: #d0d6e8; cursor: pointer; transition: background 0.2s, transform 0.15s; } .ssnw-tab-dot.active { background: #2d5be3; transform: scale(1.3); } /* 5. "Next: [Tab Name] →" link at panel bottom */ .ssnw-next-section { display: flex !important; align-items: center; justify-content: flex-end; gap: 6px; color: #2d5be3; font-size: 13px; font-weight: 600; margin-top: 24px; padding-top: 14px; border-top: 1px solid #dde3ef; cursor: pointer; user-select: none; } .ssnw-next-section span { font-size: 15px; } /* 6. Swipe hint (fades in then out) */ .ssnw-swipe-hint { text-align: center; color: #b0b8cc; font-size: 11px; margin: 2px 0 6px; opacity: 0; animation: ssnwFade 4s ease 0.8s forwards; } @keyframes ssnwFade { 0% { opacity: 0 } 15% { opacity: 1 } 70% { opacity: 1 } 100% { opacity: 0 } } } ``` --- ### Step 2 — JavaScript **Divi → Theme Options → Integration → "Add code to the (footer)"** *(or use WPCode plugin → add as "Footer" snippet)* ```html ``` --- ## Notes - The CSS is fully scoped to `@media (max-width: 980px)` so desktop is unaffected. - The JS uses `data-ssnw-init` to prevent double-initialization if the script runs twice. - Works on every page using the DiPI Advanced Tabs widget — no page-specific targeting needed. - The `→` icon visible in the panel header is the tab's Divi icon (set in the backend) — not a navigation element, and intentional.