/** * MOBILE MODIFICATIONS * Breakpoint: Max-width 800px */ @media screen and (max-width: 800px) { /* --- ACTIVITY FEED PADDING --- */ /* Remove padding on general activity, but keep/add it for "My Activity" */ .activity .bb-grid > *:not(.no-gutter), .activity .bb-grid-cell:not(.no-gutter) { padding: 0; } .my-activity .bb-grid > *:not(.no-gutter), .my-activity .bb-grid-cell:not(.no-gutter) { padding: 0 10px; } .bb-activity-media-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; margin: 0 -19px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; position: relative; width: -webkit-calc(100% + 37px); width: calc(100% + 37px); } body.activity .site-content:not(.maintenance-content) { /* padding: 0px; */ } body.activity .site-content:not(.maintenance-content) #activity-stream, body.bp-user .site-content:not(.maintenance-content) #activity-stream, body.bp-group .site-content:not(.maintenance-content) #activity-stream { margin-left: -10px; margin-right: -10px; } #buddypress .activity-list.bp-list .activity-item { border-top: 1px solid var(--bb-content-border-color); border-bottom: 1px solid var(--bb-content-border-color); border-left: 0px; border-right: 0px; border-radius: inherit; } .bb-template-v2 .bb-activity-media-elem .entry-img, .has-featured-image .activity-feature-image { border-radius: 0px; } #buddypress .bb-media-model-inner .activity-list.bp-list .activity-item { min-height: 20vh; max-height: 50vh; } /* Portrait single-media: flex item that is also a grid container, so the action-wrap and image can share the same grid cell and the overlay is always exactly the same size as the image. */ .bb-media-length-1 .bb-activity-media-elem.media-activity.bb-vertical-layout { flex : auto; display : grid; } /* Stack image link and action-wrap in the same grid cell, centered. */ #buddypress .bb-media-length-1 .bb-activity-media-elem.bb-vertical-layout .media-action-wrap, #buddypress .bb-media-length-1 .bb-activity-media-elem.bb-vertical-layout .entry-img { grid-area : 1 / 1; justify-self : center; align-self : start; } /* Image: constrain to the original displayed height so the larger source image (675×900) still renders at ~300×400 — sharper pixels, same apparent size. border-radius overrides no-round class. */ #buddypress .bb-media-length-1 .bb-activity-media-elem.bb-vertical-layout .entry-img img.photo { display : block; width : auto; height : auto; max-height : 400px; border-radius : 12px !important; } /* entry-img: behind the action-wrap, sized to the image. */ #buddypress .bb-media-length-1 .bb-activity-media-elem.bb-vertical-layout .entry-img { display : block; position : relative; z-index : 1; } /* media-action-wrap: on top of the image, exactly the same size. */ #buddypress .bb-media-length-1 .bb-activity-media-elem.bb-vertical-layout .media-action-wrap { position : relative; z-index : 2; width : 100%; height : 100%; } /* --- ACTIVITY FEED MODAL --- */ .activity-update-form.modal-popup, .bp-nouveau-activity-form-placeholder-.modal-popup { padding: 0px; } .activity-update-form.modal-popup #whats-new-form, .bp-nouveau-activity-form-placeholder-.modal-popup #whats-new-form { max-width: 100%; } /* Make the main container fill the viewport */ #bp-nouveau-activity-form.modal-popup { height: 100vh !important; max-height: 100vh !important; top: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; } /* Force the form to be a flex container so we can stretch the middle */ #bp-nouveau-activity-form.modal-popup #whats-new-form.activity-form { height: 100% !important; display: flex !important; flex-direction: column !important; } #bp-nouveau-activity-form.modal-popup .whats-new-scroll-view { max-height: inherit !important; } /* Make the main scrollable area grow to fill the remaining space */ #bp-nouveau-activity-form.modal-popup .whats-new-scroll-view { flex-grow: 1 !important; overflow-y: auto !important; display: flex !important; flex-direction: column !important; } /* Ensure the textarea container and the textarea itself stretch */ #bp-nouveau-activity-form.modal-popup .whats-new-form-header, #bp-nouveau-activity-form.modal-popup #whats-new-content, #bp-nouveau-activity-form.modal-popup #whats-new-textarea { flex-grow: 1 !important; display: flex !important; flex-direction: column !important; } /* The actual editable field where the user types */ #bp-nouveau-activity-form.modal-popup #whats-new { flex-grow: 1 !important; height: 100% !important; min-height: 100px; /* Adjust as needed */ } /* --- MOBILE HEADER & LOGO --- */ .bb-mobile-header, .header-search-wrap, .header-search-wrap form.search-form { height: 60px !important; } body:not(.activity) .sticky-header .site-content, body:not(.activity).buddypress.sticky-header .site-content { padding-top: 60px !important; } .mobile-logo-wrapper { padding: 0 15px 0 0; } /* Align logo left for logged-out users */ body:not(.logged-in) .bb-mobile-header .flex-1 { justify-content: flex-start !important; } /* Avatar and Aside Padding */ .bb-mobile-header .header-aside { padding-right: 5px !important; } body:not(.logged-in) .bb-mobile-header .header-aside { padding-right: 0 !important; } .bb-template-v2 .bb-mobile-header .header-aside .user-wrap.user-wrap-container { margin-left: 0; } /* --- GROUPS & MEMBERS MOBILE --- */ /* Hide filters and make search full width */ .groups .bp-secondary-header .push-right:has(.bp-group-filter-wrap), .members .bp-secondary-header .push-right:has(.bp-profile-filter-wrap) { display: none !important; } .groups .bp-secondary-header .push-left:has(.groups-search), .members .bp-secondary-header .push-left:has(.members-search) { width: 100%; margin-left: auto !important; } .groups .content-area, .members .content-area { padding-top: 0; } /* --- MESSAGES --- */ /* Reduce minimum height of messages page */ .bp-messages-content-wrapper, #send_message_form { min-height: 450px !important; } /* --- PHOTO/VIDEO POST MODAL --- */ .bp-video-uploader .modal-wrapper, .bp-media-photo-uploader .modal-wrapper { max-width: 800px; margin: 0px auto; vertical-align: middle; width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; } .bp-video-uploader .modal-container.has-folderlocationUI, .bp-media-photo-uploader .modal-container.has-folderlocationUI { max-height: 100%; height: 100%; overflow: auto; } } /* --- ACTIVITY FEED MODAL --- */ @media screen and (max-width: 768px) and (min-height: 550px) { .bb-is-mobile .activity-update-form.modal-popup #whats-new-form, .bb-is-mobile .bp-nouveau-activity-form-placeholder-.modal-popup #whats-new-form { top: 0px; } } /* ========================================================= Scrollable component navigation — directory pages, mobile ========================================================= Applies to: members, groups, photos, videos, documents directory nav (.bp-navs.dir-navs > ul.component-navigation). FIX 1 — width containment BuddyBoss sets no explicit width on ul.component-navigation. When display:flex is applied without width:100%, some layout contexts size the ul to its *content* (sum of all pill items) rather than its *containing block*, causing the nav to blow out past the viewport. width:100% + min-width:0 corrects this. FIX 2 — mask-image placement mask-image and overflow:hidden on the SAME element cause WebKit to create a compositing layer that blocks child scroll containers from receiving touch events. Moving mask-image onto the *scroll container* (ul) separates the two properties. Per CSS spec, a mask on a scroll container applies to the scroll *port* (visible area), so the fade stays at the visible edges as you swipe. BossSocialMenu collapses overflow items into a "…" dropdown. On mobile we neutralise that in JS (custom.js). ========================================================= */ @media screen and (max-width: 767px) { /* 1. Wrapper — positioning only; overflow:hidden clips the ul to the nav's box without touching mask-image (different element). */ .bp-navs.dir-navs { position: relative; overflow: hidden; /* Hidden until JS sets the correct width and adds .pvg-nav--ready. visibility:hidden preserves layout space — no shift when shown. */ visibility: hidden; /* width:100% is the critical fix. Without it, width:auto on a block or flex item can resolve to max-content (the sum of all pill widths) in certain layout contexts — making the nav wider than the viewport. BossSocialMenu then measures ul.width() as that large value, decides all items fit, moves nothing to the overflow dropdown, and our scroll never activates. width:100% forces the nav to fill its containing block exactly, giving the ul a proper constraint to overflow within. */ width: 100%; min-width: 0; max-width: 100%; } /* Show the nav once JS has constrained its width (pvg-nav--ready added in the DOMContentLoaded handler via requestAnimationFrame). */ .bp-navs.dir-navs.pvg-nav--ready { visibility: visible; } /* 2. Scrollable flex row. width:100% + min-width:0 are the critical additions — they force the ul to fill the nav wrapper exactly, so overflow-x:auto has something fixed to overflow *within*. mask-image lives here (not on .bp-navs.dir-navs) to avoid the WebKit compositing/scroll-block issue. */ .bp-navs.dir-navs ul.component-navigation { /* --- containment --- */ width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; /* --- flex scroll row --- */ display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; scrollbar-width: none; padding: 0; touch-action: pan-x; overscroll-behavior-x: contain; } .bp-navs.dir-navs ul.component-navigation::-webkit-scrollbar { display: none; } /* 3. Dynamic fade — JS toggles these classes on the