/* ============================================================ Web Designs Rockhampton — Mobile Fixes Paste into your main stylesheet, OR add a to this file in your AFTER your existing stylesheet. All rules are scoped to max-width: 768px — zero desktop impact. ============================================================ */ @media (max-width: 768px) { /* -------------------------------------------------------- FIX 1: HERO SECTION "Websites That Win Local Customers" + subtitle text — reduce font sizes, add breathing room -------------------------------------------------------- */ .hero h1, .hero h2, .slider-content h1, .slider-content h2, .hero-area h1, .hero-area h2 { font-size: 1.55rem !important; line-height: 1.3 !important; margin-bottom: 0.65rem !important; } .hero p, .slider-content p, .hero-area p { font-size: 0.9rem !important; line-height: 1.6 !important; margin-bottom: 1rem !important; padding: 0 0.25rem !important; } .hero, .slider-content, .hero-area { padding: 2rem 1rem !important; } /* Stack CTA buttons vertically */ .hero .btn, .hero a.btn, .slider-content .btn, .slider-content a.btn { display: block !important; width: 100% !important; margin: 0.35rem 0 !important; text-align: center !important; box-sizing: border-box !important; } /* -------------------------------------------------------- FIX 2: LOCAL ADVANTAGE SECTION "Tired of not being able to grow?" — softened heading, trimmed text, more white space, tick bullets -------------------------------------------------------- */ .local-advantage, .why-local, section.local-advantage, section.why-local { padding: 2.5rem 1.25rem !important; } .local-advantage h2, .why-local h2 { font-size: 1.3rem !important; line-height: 1.35 !important; margin-bottom: 1rem !important; } .local-advantage p, .why-local p { font-size: 0.9rem !important; line-height: 1.65 !important; margin-bottom: 1rem !important; } .local-advantage h4, .why-local h4 { font-size: 0.95rem !important; margin: 1.25rem 0 0.6rem !important; } /* Tick-style bullet list */ .local-advantage ul, .why-local ul { list-style: none !important; padding-left: 0 !important; margin: 0 0 1.25rem !important; } .local-advantage ul li, .why-local ul li { position: relative !important; padding: 0.45rem 0 0.45rem 1.6rem !important; font-size: 0.9rem !important; line-height: 1.5 !important; border-bottom: 1px solid rgba(0,0,0,0.07) !important; } .local-advantage ul li::before, .why-local ul li::before { content: "✓" !important; position: absolute !important; left: 0 !important; top: 0.45rem !important; font-weight: 700 !important; color: #2a6f2a !important; } .local-advantage .btn, .local-advantage a.btn, .why-local .btn, .why-local a.btn { display: block !important; width: 100% !important; text-align: center !important; margin-top: 1.25rem !important; box-sizing: border-box !important; } /* -------------------------------------------------------- FIX 3: "LOCAL RESPONSE" + 3 WIDGETS (4 numbered boxes) Tighten padding and font — no design change -------------------------------------------------------- */ .info-boxes, .icon-boxes, .numbered-boxes, .cq-boxes, .features-boxes { gap: 0.6rem !important; } .info-boxes .box, .icon-boxes .box, .numbered-boxes .box, .cq-boxes .box, .features-boxes .box, .info-boxes > div, .icon-boxes > div, [class*="col"] .box { padding: 1rem 0.9rem !important; margin-bottom: 0.6rem !important; } /* Number badge */ .info-boxes .box .number, .numbered-boxes .number, .cq-boxes .number { font-size: 1.4rem !important; margin-bottom: 0.4rem !important; } /* Box heading */ .info-boxes h3, .info-boxes h4, .cq-boxes h3, .cq-boxes h4, .numbered-boxes h3, .numbered-boxes h4 { font-size: 0.95rem !important; margin-bottom: 0.35rem !important; } /* Box body text */ .info-boxes p, .cq-boxes p, .numbered-boxes p { font-size: 0.85rem !important; line-height: 1.5 !important; margin-bottom: 0 !important; } /* -------------------------------------------------------- FIX 4: "BUILT AROUND RESEARCH, PLANNING AND EXECUTION" Tighten section padding + reduce text footprint -------------------------------------------------------- */ .how-we-work, .process-section, section.how-we-work, section.process-section, .agency-section, .built-section { padding: 2rem 1.1rem !important; } .how-we-work h2, .process-section h2, .agency-section h2, .built-section h2 { font-size: 1.3rem !important; line-height: 1.35 !important; margin-bottom: 0.75rem !important; } .how-we-work p, .process-section p, .agency-section p, .built-section p { font-size: 0.88rem !important; line-height: 1.6 !important; margin-bottom: 0.75rem !important; } /* Step items */ .how-we-work .step, .process-section .step, .how-we-work .process-step { padding: 0.85rem 0.75rem !important; margin-bottom: 0.6rem !important; } .how-we-work .step h3, .process-section .step h3, .how-we-work .process-step h3 { font-size: 0.95rem !important; margin-bottom: 0.3rem !important; } .how-we-work .step p, .process-section .step p, .how-we-work .process-step p { font-size: 0.85rem !important; margin-bottom: 0 !important; } /* Step number */ .how-we-work .step-number, .process-section .step-number { font-size: 1.3rem !important; margin-bottom: 0.35rem !important; } /* -------------------------------------------------------- FIX 5: FOOTER Reduce padding, tighten font sizes and column spacing -------------------------------------------------------- */ footer, .footer, .site-footer { padding: 1.75rem 1rem 1rem !important; } /* Footer columns — stack and reduce gap */ footer .row, .footer .row, .site-footer .row { gap: 0 !important; } footer [class*="col"], .footer [class*="col"], .site-footer [class*="col"] { margin-bottom: 1.25rem !important; padding: 0 !important; } /* Footer headings */ footer h5, footer h6, .footer h5, .footer h6, .site-footer h5, .site-footer h6 { font-size: 0.85rem !important; margin-bottom: 0.5rem !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; } /* Footer links */ footer ul, .footer ul, .site-footer ul { padding-left: 0 !important; list-style: none !important; margin-bottom: 0.5rem !important; } footer ul li, .footer ul li, .site-footer ul li { font-size: 0.82rem !important; line-height: 1.7 !important; } /* Footer logo */ footer img, .footer img, .site-footer img { max-width: 130px !important; margin-bottom: 0.75rem !important; } /* Footer tagline / description */ footer p, .footer p, .site-footer p { font-size: 0.82rem !important; line-height: 1.55 !important; margin-bottom: 0.6rem !important; } /* Copyright bar */ .footer-bottom, .copyright, footer .bottom-bar { padding: 0.75rem 0 !important; font-size: 0.78rem !important; } .footer-bottom a, .copyright a, footer .bottom-bar a { font-size: 0.78rem !important; } } /* end @media max-width: 768px */ /* ============================================================ Step 8c — Footer email row + stacked copyright (mobile) ============================================================ */ @media (max-width: 768px) { .footer-email-row { border-top: 1px solid rgba(255,255,255,0.08); padding: 10px 0 12px; margin-top: 12px; } .footer-email-row a { font-size: 0.82rem; color: rgba(255,255,255,0.6); text-decoration: none; display: block; } .footer-bottom { display: flex !important; flex-direction: column !important; gap: 6px !important; padding: 0.75rem 0 !important; font-size: 0.78rem !important; } .footer-bottom-links { display: flex; gap: 12px; } .footer-bottom-links a { font-size: 0.78rem !important; color: rgba(255,255,255,0.5); text-decoration: none; } }