![]()
The 1fr 1fr grid is the overflow root cause.
================================================================ */
@media (max-width: 768px) {
/* The detail layout grid — break 1fr 1fr to single column */
/* Targets the inline grid div wrapping image+info */
.box [style*="grid-template-columns:1fr 1fr"] {
display: block !important;
}
/* Image column — full width, remove right border */
.box [style*="border-right:0.5px solid #edf1f7"] {
border-right: none !important;
border-bottom: 1px solid #edf1f7 !important;
padding: 16px !important;
}
/* Main product image — already has width:100% but ensure it */
.box [style*="border-right:0.5px solid #edf1f7"] img {
width: 100% !important;
max-height: 300px !important;
object-fit: contain !important;
border-radius: 6px !important;
}
/* Thumbnail strip — keep flex row, make it horizontally scrollable */
.box [style*="display:flex;gap:6px;flex-wrap:wrap;margin-top:10px"] {
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
padding-bottom: 6px !important;
scrollbar-width: thin !important;
}
/* Individual thumbnails — 60×60 is fine, prevent flex shrink */
.box [style*="display:flex;gap:6px;flex-wrap:wrap;margin-top:10px"] img {
flex-shrink: 0 !important;
width: 60px !important;
height: 60px !important;
}
/* Product info column — full width */
.box [style*="padding:20px;"] {
padding: 16px !important;
}
/* Quantity spinner buttons — 30×30 too small for mobile */
#det-qty {
height: 40px !important;
width: 64px !important;
font-size: 16px !important;
}
/* ± buttons next to qty spinner */
button[onclick*="det-qty"] {
width: 40px !important;
height: 40px !important;
font-size: 20px !important;
touch-action: manipulation !important;
}
}
/* ================================================================
FIX 3 — TAP TARGETS
Exact elements from source:
products.php:
- .cart-btn (font-size:11px, padding:5px 12px) — TOO SMALL
- qty ± buttons (22×22px inline style) — TOO SMALL
- .prod-qty input (22px height) — TOO SMALL
- pagination links (padding:5px 12px) — borderline
detail.php:
- .cart-btn (padding:9px 18px) — OK
- ± buttons (30×30px) — borderline
- "Quick Inquiry" / "WhatsApp" .btn — OK size
inquiry.php:
- "Send Inquiry" button .btn.btn-green (padding:11px 28px) — OK
- inquiry type grid labels (padding:10px 6px) — tight on 3col
- "Clear all" cart button (padding:2px 6px) — TOO SMALL
header_cart.php:
- .cart-view-btn (padding:6px) — borderline
================================================================ */
@media (max-width: 900px) {
/* ── Product grid cart button — the main offender ── */
/* Source: padding:5px 12px, font-size:11px */
.prod-footer .cart-btn {
min-height: 44px !important;
width: 100% !important;
padding: 10px 12px !important;
font-size: 13px !important;
justify-content: center !important;
display: flex !important;
align-items: center !important;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
border-radius: 5px !important;
}
/* ── Qty spinner ± buttons in product cards ── */
/* Source: 22×22px inline */
.qty-wrap button {
width: 36px !important;
height: 36px !important;
font-size: 18px !important;
touch-action: manipulation !important;
border-radius: 4px !important;
}
/* ── Qty input in product cards ── */
/* Source: 40×22px inline */
.prod-qty {
height: 36px !important;
width: 48px !important;
font-size: 14px !important;
}
/* ── Qty wrap — stack comfortably ── */
.qty-wrap {
gap: 6px !important;
justify-content: flex-start;
}
/* ── prod-footer: column layout already — just add spacing ── */
.prod-footer {
gap: 7px !important;
}
/* ── Details link ── */
.prod-link {
min-height: 38px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 12px !important;
padding: 6px 10px !important;
}
/* ── Pagination links ── */
.page-body main [style*="page="] {
min-height: 40px !important;
min-width: 40px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* ── Inquiry page: type selector grid ── */
/* Source: 3-column grid, padding:10px 6px — very tight on mobile */
#inqTypeGrid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px !important;
}
#inqTypeGrid label {
min-height: 70px !important;
padding: 12px 8px !important;
font-size: 12px !important;
}
#inqTypeGrid label span:last-child {
font-size: 11px !important;
line-height: 1.35 !important;
}
/* ── Inquiry "Clear all" cart button ── */
/* Source: padding:2px 6px — untappable */
#cartSection button[onclick="clearCartUI()"] {
min-height: 36px !important;
padding: 6px 12px !important;
font-size: 12px !important;
}
/* ── Cart counter view button — header_cart.php ── */
/* Source: padding:6px — borderline */
.cart-view-btn {
min-height: 42px !important;
padding: 10px !important;
font-size: 13px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* ── Global .btn safety net ── */
.btn {
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
touch-action: manipulation;
}
/* ── Submit / primary CTA — already adequate but enforce ── */
button[type="submit"],
input[type="submit"] {
min-height: 48px !important;
touch-action: manipulation;
}
}
/* ================================================================
FIX 4 — INQUIRY PAGE: two-column layout → single column
Source: display:grid;grid-template-columns:1fr 340px — 340px
sidebar breaks on any screen under ~720px.
Also: contact detail rows use 10.5px inline — bump up.
================================================================ */
@media (max-width: 768px) {
/* Main two-column layout */
[style*="grid-template-columns:1fr 340px"] {
display: block !important;
}
/* Trust sidebar — appears below form on mobile */
[style*="grid-template-columns:1fr 340px"] > div:last-child {
margin-top: 18px !important;
}
/* "What happens next" — 3-column steps */
[style*="grid-template-columns:repeat(3,1fr)"] {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
/* Contact detail form field grids — 1fr 1fr → 1col */
[style*="grid-template-columns:1fr 1fr;gap:10px"] {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
/* Inquiry type grid already handled in FIX 3 */
/* Page header banner — reduce padding */
[style*="background:linear-gradient(135deg,#0d2d6b"] {
padding: 18px 16px !important;
border-radius: 8px !important;
}
/* Trust badges row — wrap properly */
[style*="display:flex;gap:8px;flex-wrap:wrap"] {
gap: 6px !important;
}
}
/* Form inputs — mobile-friendly sizing */
@media (max-width: 900px) {
.form-group input,
.form-group select,
.form-group textarea {
min-height: 44px !important;
font-size: 15px !important; /* prevents iOS auto-zoom (requires ≥16px on iOS) */
padding: 10px 12px !important;
border-radius: 5px !important;
width: 100% !important;
box-sizing: border-box !important;
}
.form-group textarea {
min-height: 90px !important;
font-size: 14px !important;
}
/* iOS zoom prevention — 16px on all inputs */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
font-size: 16px !important; /* critical: prevents iOS zoom on focus */
}
.form-group label {
font-size: 12px !important;
margin-bottom: 5px !important;
display: block !important;
}
}
/* ================================================================
FIX 5 — HTACCESS VARY HEADER (CSS-side note only)
The Vary: Accept-Encoding header is handled in the .htaccess
patch file. No CSS changes needed here.
FIX 5A — MOBILE CATEGORY BAR: scroll indicator
The .mobile-cats scrolls horizontally — add a fade hint
so users know it's scrollable.
================================================================ */
@media (max-width: 900px) {
.mobile-cats-wrap {
position: relative;
}
.mobile-cats-wrap::after {
content: '';
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 32px;
background: linear-gradient(to right, transparent, rgba(13,45,107,0.8));
pointer-events: none;
}
}
/* ================================================================
FIX 6 — PRODUCTS PAGE: miscellaneous mobile improvements
- "Can't find it?" CTA bar stacks properly
- Pagination wraps and has decent tap size
- Search form on products page usable
================================================================ */
@media (max-width: 600px) {
/* "Can't find it?" CTA — flex row → column */
[style*="background:#f0fdf4;border:1px solid #bbf7d0"] {
flex-direction: column !important;
align-items: flex-start !important;
}
[style*="background:#f0fdf4;border:1px solid #bbf7d0"] > div:last-child {
width: 100% !important;
}
[style*="background:#f0fdf4;border:1px solid #bbf7d0"] .btn {
flex: 1 !important;
text-align: center !important;
justify-content: center !important;
}
/* Products page inline search */
[style*="display:flex;gap:6px;margin-top:10px"] input[name="q"] {
font-size: 16px !important; /* iOS zoom fix */
min-height: 42px !important;
}
[style*="display:flex;gap:6px;margin-top:10px"] button[type="submit"] {
min-height: 42px !important;
padding: 8px 14px !important;
font-size: 13px !important;
white-space: nowrap !important;
}
}
/* ================================================================
FIX 7 — CART COUNTER: mobile positioning
Source (header_cart.php): position:fixed;bottom:80px;left:16px
On mobile with sticky bottom bar (mob-sticky-bar at 56px),
the cart counter needs to clear the bar.
================================================================ */
@media (max-width: 900px) {
/* Cart counter — keep above sticky bottom bar */
.cart-counter {
bottom: 68px !important; /* 56px bar + 12px gap */
left: 12px !important;
min-width: 170px !important;
font-size: 12px !important;
padding: 10px 14px !important;
border-radius: 10px !important;
max-width: calc(100vw - 24px) !important;
}
.cart-counter-num {
font-size: 20px !important;
line-height: 1.2 !important;
}
}
/* ================================================================
FIX 8 — DETAIL PAGE: action buttons — stack on mobile
Source: display:flex;gap:8px;flex-wrap:wrap — wraps but
buttons vary in width and look messy.
================================================================ */
@media (max-width: 480px) {
.detail-actions {
flex-direction: column !important;
gap: 8px !important;
}
.detail-actions .cart-btn,
.detail-actions .btn {
width: 100% !important;
min-height: 48px !important;
justify-content: center !important;
font-size: 14px !important;
font-weight: 700 !important;
}
/* WhatsApp button — keep green */
.detail-actions a[href*="wa.me"] {
background: #25d366 !important;
color: #fff !important;
}
/* Product name — comfortable reading */
[style*="font-size:19px;font-weight:800;color:#0d2d6b"] {
font-size: 17px !important;
line-height: 1.35 !important;
}
}
/* ================================================================
FIX 9 — STICKY BOTTOM BAR: push WhatsApp float above it
.wa-float is already handled in mobile.css (bottom:68px).
This ensures nothing overlaps the bar.
================================================================ */
@media (max-width: 900px) {
/* Ensure body padding covers the sticky bar height */
body {
padding-bottom: 60px !important;
}
/* WhatsApp float — mobile.css sets bottom:68px already.
Confirm it doesn't overlap with cart counter. */
.wa-float {
bottom: 70px !important;
right: 12px !important;
font-size: 12px !important;
padding: 10px 14px !important;
}
}
/* ================================================================
FIX 10 — HOMEPAGE HERO BUTTONS
Project memory: hero buttons position:absolute, left:3%, bottom:8%
On very small screens they can overlap each other.
================================================================ */
@media (max-width: 480px) {
/* Hero CTA buttons — from index.php hero section */
.hero-btns,
[style*="position:absolute"][style*="bottom:8%"] {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
bottom: 5% !important;
left: 4% !important;
right: 4% !important;
width: auto !important;
}
.hero-btns .btn,
[style*="position:absolute"][style*="bottom:8%"] .btn,
[style*="position:absolute"][style*="bottom:8%"] a {
width: 100% !important;
min-height: 46px !important;
text-align: center !important;
justify-content: center !important;
font-size: 13px !important;
}
}