/* |-------------------------------------------------------------------------- | Dream Social Mobile CSS |-------------------------------------------------------------------------- | File: /public_html/social/mobile.css |-------------------------------------------------------------------------- | Purpose: | - Fix Dream Social index/feed on mobile phones | - Make posts, forms, cards, grids, sidebars, media, and navigation responsive | - Keep desktop design untouched as much as possible |-------------------------------------------------------------------------- | Install: | Add this line inside of /public_html/social/index.php: | |-------------------------------------------------------------------------- */ html, body{ max-width:100%; overflow-x:hidden; } img, video, iframe, embed, object{ max-width:100%; height:auto; } input, select, textarea, button{ max-width:100%; } a, button, .btn{ -webkit-tap-highlight-color:transparent; } /* |-------------------------------------------------------------------------- | Tablet and small laptop cleanup |-------------------------------------------------------------------------- */ @media(max-width:1180px){ body{ overflow-x:hidden!important; } .wrap, .container, .main-wrap, .content-wrap, .page-wrap, .social-wrap{ width:100%!important; max-width:100%!important; padding-left:18px!important; padding-right:18px!important; } .layout, .main-layout, .feed-layout, .social-layout, .dashboard-layout, .content-layout, .profile-layout, .messages-layout, .three-column, .three-col, .grid-layout{ display:grid!important; grid-template-columns:1fr!important; gap:18px!important; width:100%!important; max-width:100%!important; } .leftbar, .rightbar, .left-sidebar, .right-sidebar, .sidebar-left, .sidebar-right, aside.leftbar, aside.rightbar{ display:none!important; } .main, main, .feed, .feed-main, .content, .main-content, .center-column{ width:100%!important; max-width:100%!important; min-width:0!important; } .grid, .grid2, .grid-2, .grid3, .grid-3, .grid4, .grid-4, .cards-grid, .profile-grid, .market-grid, .opportunity-grid, .post-grid{ display:grid!important; grid-template-columns:1fr!important; gap:16px!important; } .statgrid, .stats-grid, .kpi-grid, .metric-grid{ display:grid!important; grid-template-columns:repeat(2,1fr)!important; gap:12px!important; } .card, .post-card, .feed-card, .profile-card, .composer-card, .panel, .box, .module-card{ width:100%!important; max-width:100%!important; border-radius:18px!important; } .hero, .page-hero, .social-hero{ padding:32px 18px!important; } .hero h1, .page-hero h1, .social-hero h1{ font-size:34px!important; line-height:1.05!important; letter-spacing:-1px!important; } .hero p, .page-hero p, .social-hero p{ font-size:16px!important; line-height:1.6!important; } } /* |-------------------------------------------------------------------------- | Phone layout |-------------------------------------------------------------------------- */ @media(max-width:760px){ body{ font-size:15px!important; background:#f3f6fb!important; padding-bottom:84px!important; } .wrap, .container, .main-wrap, .content-wrap, .page-wrap, .social-wrap{ padding-left:12px!important; padding-right:12px!important; } .dream-social-header, .topbar, .social-header, .site-header{ position:sticky!important; top:0!important; z-index:9999!important; width:100%!important; } .dream-social-header{ padding:12px!important; display:flex!important; flex-direction:column!important; align-items:stretch!important; gap:10px!important; } .social-logo, .brand, .logo{ width:100%!important; display:flex!important; align-items:center!important; justify-content:space-between!important; } .social-logo a, .brand, .logo a{ font-size:20px!important; line-height:1.15!important; } .social-nav, .nav, .main-nav{ width:100%!important; display:flex!important; gap:8px!important; overflow-x:auto!important; overflow-y:hidden!important; -webkit-overflow-scrolling:touch!important; padding-bottom:4px!important; scrollbar-width:none!important; } .social-nav::-webkit-scrollbar, .nav::-webkit-scrollbar, .main-nav::-webkit-scrollbar{ display:none!important; } .social-nav a, .nav a, .main-nav a{ flex:0 0 auto!important; white-space:nowrap!important; min-height:40px!important; padding:10px 12px!important; border-radius:999px!important; font-size:13px!important; } .social-account{ width:100%!important; display:flex!important; flex-wrap:wrap!important; gap:8px!important; } .social-user{ width:100%!important; font-size:13px!important; } .social-btn{ flex:1 1 auto!important; text-align:center!important; justify-content:center!important; } .hero, .page-hero, .social-hero{ padding:26px 12px!important; border-radius:0!important; } .hero h1, .page-hero h1, .social-hero h1{ font-size:29px!important; line-height:1.08!important; margin-bottom:10px!important; } .hero p, .page-hero p, .social-hero p{ font-size:15px!important; line-height:1.55!important; } .hero-actions, .actions, .button-row, .btn-row{ display:flex!important; flex-direction:column!important; gap:9px!important; width:100%!important; } .hero-actions .btn, .actions .btn, .button-row .btn, .btn-row .btn, .hero-actions a, .actions a{ width:100%!important; justify-content:center!important; text-align:center!important; } form, .composer, .post-composer, .create-post, .composer-card{ width:100%!important; } input, select, textarea{ width:100%!important; min-height:46px!important; font-size:16px!important; border-radius:13px!important; } textarea{ min-height:110px!important; } button, .btn, input[type="submit"]{ min-height:46px!important; border-radius:13px!important; font-size:14px!important; } .form-grid, .form-grid.two, .form-grid.three, .form-row, .input-row, .filter-row{ display:grid!important; grid-template-columns:1fr!important; gap:10px!important; } .post, .post-card, .feed-post, .feed-card, article.card{ padding:14px!important; border-radius:18px!important; margin-bottom:14px!important; width:100%!important; max-width:100%!important; } .post-header, .feed-header, .card-header, .profile-row, .user-row{ display:flex!important; align-items:center!important; gap:10px!important; width:100%!important; } .avatar, .profile-avatar, .user-avatar{ width:44px!important; height:44px!important; min-width:44px!important; border-radius:50%!important; font-size:16px!important; } .post h2, .post-card h2, .feed-card h2, .card h2{ font-size:21px!important; line-height:1.2!important; word-break:break-word!important; } .post h3, .post-card h3, .feed-card h3, .card h3{ font-size:18px!important; line-height:1.25!important; word-break:break-word!important; } .post p, .post-card p, .feed-card p, .card p, .small{ font-size:14px!important; line-height:1.55!important; word-break:break-word!important; } .post-media, .media, .media-box, .video-box, .image-box{ width:100%!important; max-width:100%!important; border-radius:14px!important; overflow:hidden!important; margin:10px 0!important; } .post-media img, .media img, .image-box img, .post-card img, .feed-card img{ width:100%!important; height:auto!important; max-height:360px!important; object-fit:cover!important; border-radius:14px!important; } .post-media video, .media video, .video-box video, video{ width:100%!important; height:auto!important; max-height:360px!important; border-radius:14px!important; background:#000!important; } iframe{ width:100%!important; min-height:220px!important; border-radius:14px!important; } .doc-card, .file-card, .attachment-card{ width:100%!important; padding:16px!important; border-radius:14px!important; word-break:break-word!important; } .post-actions, .feed-actions, .social-actions, .actions{ display:grid!important; grid-template-columns:repeat(2,1fr)!important; gap:8px!important; width:100%!important; margin-top:12px!important; } .post-actions a, .post-actions button, .feed-actions a, .feed-actions button, .social-actions a, .social-actions button, .actions a, .actions button{ width:100%!important; min-height:42px!important; justify-content:center!important; text-align:center!important; padding:9px 10px!important; font-size:13px!important; } .badge, .tag, .pill{ font-size:11px!important; padding:6px 9px!important; max-width:100%!important; white-space:normal!important; } .list-item, .notification, .message-row, .profile-list-item{ display:flex!important; gap:10px!important; width:100%!important; padding:12px 0!important; } .list-icon{ width:38px!important; height:38px!important; min-width:38px!important; border-radius:12px!important; } .statgrid, .stats-grid, .kpi-grid, .metric-grid{ grid-template-columns:1fr 1fr!important; gap:10px!important; } .stat, .kpi, .metric{ padding:12px!important; border-radius:14px!important; } .stat b, .kpi b, .metric b{ font-size:20px!important; } .stat span, .kpi span, .metric span{ font-size:11px!important; } table{ width:100%!important; min-width:650px!important; } .table-wrap, .table-box, .responsive-table{ width:100%!important; overflow-x:auto!important; -webkit-overflow-scrolling:touch!important; } .card > table, section > table{ display:block!important; overflow-x:auto!important; -webkit-overflow-scrolling:touch!important; } .tabs, .tabbar, .filter-tabs{ display:flex!important; gap:8px!important; overflow-x:auto!important; -webkit-overflow-scrolling:touch!important; scrollbar-width:none!important; } .tabs::-webkit-scrollbar, .tabbar::-webkit-scrollbar, .filter-tabs::-webkit-scrollbar{ display:none!important; } .tabs a, .tabbar a, .filter-tabs a{ flex:0 0 auto!important; white-space:nowrap!important; } .card, .panel, .box, .quick, .profile, .marketplace-card, .job-card, .event-card, .provider-card, .group-card{ padding:14px!important; border-radius:18px!important; } .grid, .grid2, .grid-2, .grid3, .grid-3, .grid4, .grid-4, .cards-grid, .profile-grid, .market-grid, .opportunity-grid, .post-grid{ grid-template-columns:1fr!important; gap:14px!important; } .messages-layout, .chat-layout{ display:grid!important; grid-template-columns:1fr!important; } .conversation-list, .chat-sidebar{ max-height:300px!important; overflow:auto!important; } .chat-window, .message-thread{ min-height:360px!important; max-height:60vh!important; overflow:auto!important; } .message-bubble{ max-width:92%!important; } .mobilebar, .mobile-nav, .bottom-nav{ display:flex!important; position:fixed!important; left:0!important; right:0!important; bottom:0!important; z-index:99999!important; background:#ffffff!important; border-top:1px solid #dbe4ef!important; box-shadow:0 -10px 30px rgba(6,26,56,.14)!important; padding:7px 4px calc(7px + env(safe-area-inset-bottom))!important; } .mobilebar a, .mobile-nav a, .bottom-nav a{ flex:1!important; text-align:center!important; color:#0b4aa2!important; font-size:11px!important; font-weight:900!important; padding:6px 2px!important; border-radius:10px!important; } .mobilebar a:active, .mobile-nav a:active, .bottom-nav a:active{ background:#eef4ff!important; } .desktop-only, .hide-mobile{ display:none!important; } .mobile-only{ display:block!important; } } /* |-------------------------------------------------------------------------- | Extra small phones |-------------------------------------------------------------------------- */ @media(max-width:420px){ .wrap, .container, .main-wrap, .content-wrap, .page-wrap, .social-wrap{ padding-left:10px!important; padding-right:10px!important; } .hero h1, .page-hero h1, .social-hero h1{ font-size:25px!important; } .hero p, .page-hero p, .social-hero p{ font-size:14px!important; } .post-actions, .feed-actions, .social-actions, .actions{ grid-template-columns:1fr!important; } .statgrid, .stats-grid, .kpi-grid, .metric-grid{ grid-template-columns:1fr!important; } .social-nav a, .nav a, .main-nav a{ font-size:12px!important; padding:9px 10px!important; } .card, .post-card, .feed-card{ padding:12px!important; } .avatar, .profile-avatar, .user-avatar{ width:40px!important; height:40px!important; min-width:40px!important; } } /* |-------------------------------------------------------------------------- | Landscape phone fix |-------------------------------------------------------------------------- */ @media(max-width:900px) and (orientation:landscape){ .hero, .page-hero, .social-hero{ padding:22px 14px!important; } .mobilebar, .mobile-nav, .bottom-nav{ padding:5px 4px!important; } body{ padding-bottom:66px!important; } } /* |-------------------------------------------------------------------------- | Emergency width overrides for oversized generated files |-------------------------------------------------------------------------- */ @media(max-width:760px){ [style*="grid-template-columns"]{ grid-template-columns:1fr!important; } [style*="width: 1200px"], [style*="width:1200px"], [style*="min-width: 1200px"], [style*="min-width:1200px"]{ width:100%!important; min-width:0!important; } pre, code{ white-space:pre-wrap!important; word-break:break-word!important; max-width:100%!important; } }