/* ============================================================ RESPONSIVE & ALIGNMENT FIX — dissertationhomework.com Targets: .blog_details_content (new elements: TOC, CTA, FAQ, Related Articles, Featured Images, Internal Links, Lists) Also: Footer alignment, Writer box tweaks, global overflow ADD TO : Place AFTER responsive.css to override where needed. ============================================================ */ /* ==== GLOBAL OVERFLOW PREVENTION ==== */ html, body { overflow-x: hidden; max-width: 100%; } *, *::before, *::after { box-sizing: border-box; } /* ==== ALL IMAGES — never exceed container ==== */ img { max-width: 100%; height: auto; } .img-fluid { max-width: 100%; height: auto; display: block; } /* ==== BLOG CONTENT CONTAINER ==== */ .blog_details, .blog_details_content { max-width: 100%; overflow-x: hidden; word-wrap: break-word; overflow-wrap: break-word; } .blog_details_content img { max-width: 100%; height: auto; border-radius: 8px; } /* ==== TABLE OF CONTENTS (toc-box) ==== */ .toc-box { background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; padding: 20px; margin: 20px 0; max-width: 100%; overflow: hidden; } .toc-box h3 { margin-top: 0; font-size: 1.2rem; } .toc-box ol { margin-bottom: 0; padding-left: 20px; } .toc-box ol li { margin-bottom: 6px; line-height: 1.6; } .toc-box ol li a { color: #1a73e8; text-decoration: none; word-break: break-word; } .toc-box ol li a:hover { text-decoration: underline; } /* ==== CTA BOXES (cta-box) ==== */ .cta-box { max-width: 100%; overflow: hidden; word-wrap: break-word; } .cta-box h3 { margin-top: 0; font-size: 1.15rem; line-height: 1.4; } .cta-box p { line-height: 1.7; } .cta-box a { display: inline-block; border-radius: 6px; text-decoration: none; font-weight: bold; text-align: center; transition: opacity 0.2s ease; } .cta-box a:hover { opacity: 0.9; text-decoration: none; } /* ==== FAQ SECTION ==== */ .faq-section { max-width: 100%; } .faq-item { margin-bottom: 18px; padding: 15px; background: #f8f9fa; border-radius: 8px; border-left: 3px solid #1a73e8; max-width: 100%; overflow: hidden; word-wrap: break-word; } .faq-item h4 { margin-bottom: 8px; font-size: 1.05rem; line-height: 1.4; } .faq-item p { margin-bottom: 0; line-height: 1.7; } /* ==== HEADINGS — prevent overflow ==== */ .blog_details_content h1, .blog_details_content h2, .blog_details_content h3, .blog_details_content h4 { word-wrap: break-word; overflow-wrap: break-word; max-width: 100%; } /* ==== LINKS — prevent overflow ==== */ .blog_details_content a { word-break: break-word; } /* ==== LISTS — contained ==== */ .blog_details_content ul, .blog_details_content ol { padding-left: 20px; max-width: 100%; } .blog_details_content li { word-wrap: break-word; overflow-wrap: break-word; line-height: 1.8; } /* ==== TABLES — responsive ==== */ .blog_details_content table { width: 100%; max-width: 100%; overflow-x: auto; display: block; } /* ==== PRE/CODE ==== */ .blog_details_content pre, .blog_details_content code { max-width: 100%; overflow-x: auto; word-wrap: break-word; } /* ==== IFRAMES — responsive ==== */ .blog_details_content iframe { max-width: 100%; } /* ==== FOOTER ALIGNMENT ==== */ footer.bg-black, footer.footer-color { width: 100%; max-width: 100%; overflow-x: hidden; } footer img { max-width: 100%; height: auto; object-fit: contain; } footer .footer-logo img { max-width: 180px; height: auto; } footer .social-icons a img, footer .social-icons img { width: 35px; height: 35px; object-fit: contain; display: inline-block; vertical-align: middle; } footer .contact-info, footer .footer-contact { line-height: 1.8; } footer .contact-info img { width: 20px; height: 20px; vertical-align: middle; margin-right: 8px; } /* ================================================================ TABLET — max-width: 991px ================================================================ */ @media (max-width: 991px) { /* Footer columns to 2-up */ footer .col-md-3, footer .col-lg-3 { margin-bottom: 25px; flex: 0 0 50%; max-width: 50%; } /* Blog content — remove excessive padding */ .blog_details_content { padding-left: 5px; padding-right: 5px; } } /* ================================================================ MOBILE — max-width: 768px ================================================================ */ @media (max-width: 768px) { /* Blog content padding */ .blog_details, .blog_details_content { padding-left: 8px; padding-right: 8px; } /* Headings scale down */ .blog_details_content h1 { font-size: 1.5rem; } .blog_details_content h2 { font-size: 1.25rem; } .blog_details_content h3 { font-size: 1.12rem; } .blog_details_content h4 { font-size: 1.02rem; } /* CTA box — full width button on mobile */ .cta-box { padding: 16px !important; margin: 20px 0 !important; } .cta-box a { display: block !important; width: 100% !important; text-align: center !important; padding: 14px 20px !important; font-size: 1rem; } /* Override inline styles on CTA divs */ .blog_details_content div[style*="border-left:4px solid"] { padding: 16px !important; margin: 20px 0 !important; } .blog_details_content div[style*="border-left:4px solid"] a[style*="display:inline-block"] { display: block !important; width: 100% !important; text-align: center !important; padding: 14px 20px !important; } /* TOC box */ .toc-box { padding: 15px !important; margin: 15px 0 !important; } .toc-box ol { padding-left: 18px; } /* FAQ items */ .faq-item { padding: 12px !important; margin-bottom: 14px !important; } /* Related articles box (inline style background:#fff8f0) */ .blog_details_content div[style*="background:#fff8f0"] { padding: 14px !important; margin: 20px 0 !important; } /* Footer to single column */ footer .col-md-3, footer .col-lg-3 { margin-bottom: 20px; flex: 0 0 100%; max-width: 100%; } /* Lists tighter */ .blog_details_content ul, .blog_details_content ol { padding-left: 18px; } } /* ================================================================ SMALL MOBILE — max-width: 576px (iPhone SE, small Android) ================================================================ */ @media (max-width: 576px) { /* Footer center align */ footer .col-md-3, footer .col-lg-3 { flex: 0 0 100%; max-width: 100%; text-align: center; margin-bottom: 20px; } footer .social-icons { justify-content: center; display: flex; gap: 10px; flex-wrap: wrap; } /* Headings smaller */ .blog_details_content h1 { font-size: 1.35rem; } .blog_details_content h2 { font-size: 1.15rem; } .blog_details_content h3 { font-size: 1.05rem; } /* Blog content tighter */ .blog_details, .blog_details_content { padding-left: 6px; padding-right: 6px; } /* CTA buttons — touch-friendly min height */ .cta-box a, .blog_details_content div[style*="border-left:4px solid"] a { padding: 16px 20px !important; font-size: 1.02rem !important; min-height: 48px; } /* Writer box — already handled by existing responsive.css */ /* but ensure stats don't overflow */ .writer-stats { flex-wrap: wrap !important; justify-content: center; gap: 4px 6px; } .writer-stats span { font-size: 12px !important; white-space: nowrap; } /* TOC — tighter padding */ .toc-box ol { padding-left: 16px !important; } /* FAQ — slightly smaller heading */ .faq-item h4 { font-size: 0.95rem !important; } /* Social icons smaller */ footer .social-icons a img, footer .social-icons img { width: 30px; height: 30px; } /* Images rounded less */ .blog_details_content img { border-radius: 6px; } } /* ================================================================ VERY SMALL — max-width: 375px (iPhone SE, older Android) ================================================================ */ @media (max-width: 375px) { .blog_details_content h1 { font-size: 1.2rem; } .blog_details_content h2 { font-size: 1.08rem; } .blog_details_content h3 { font-size: 0.98rem; } .cta-box, .blog_details_content div[style*="border-left:4px solid"] { padding: 10px !important; border-left-width: 3px !important; } .toc-box { padding: 10px !important; } .faq-item { padding: 8px !important; } body { font-size: 15px; } .writer-box { padding: 10px 8px !important; gap: 8px !important; } } /* ================================================================ LANDSCAPE MODE — prevent cramped layout ================================================================ */ @media (max-height: 500px) and (orientation: landscape) { .cta-box a { padding: 10px 20px !important; } .blog_details_content h2 { font-size: 1.2rem; } } /* ================================================================ PRINT — clean output ================================================================ */ @media print { .cta-box, .toc-box, .writer-box, footer .social-icons { display: none; } body { font-size: 12pt; color: #000; } a { color: #000; text-decoration: underline; } }