/* * ============================================================ * Runventures — Mobile Fixes * Add this AFTER main.css and my-custom-styles.css in * * ============================================================ */ /* ─── 1. NAVBAR / TOPBAR ─────────────────────────────────── */ /* Prevent the navbar collapsing strangely — give it a solid min-height */ .navbar-default { min-height: 56px; } /* On small screens the top social-icon bar eats vertical space */ @media (max-width: 767px) { .nav-topbar { display: none; /* hide top social bar; social icons live in footer too */ } /* Logo should be centred when there's no hamburger menu */ .navbar .navbar-brand { float: none; display: block; text-align: center; margin: 0 auto; padding: 8px 15px; } .navbar .navbar-brand img { max-height: 42px; width: auto; } } /* ─── 2. PAGE HEADER / BREADCRUMBS ───────────────────────── */ @media (max-width: 767px) { .page-header { padding: 10px 0 !important; } /* Title and breadcrumb stack vertically */ .page-header .page-title { float: none !important; font-size: 20px; margin-bottom: 6px; display: block; } .page-header .breadcrumb { float: none !important; padding-left: 0; margin-bottom: 0; font-size: 13px; } } /* ─── 3. MASONRY / BLOG-CARD GRID ────────────────────────── */ /* Isotope masonry falls back to a plain single-column stack on mobile. Force cards to full width and remove any fixed widths. */ @media (max-width: 767px) { .blog-masonry .grid-sizer, .blog-masonry .grid-item, .blog-masonry .grid-item-width-2x { width: 100% !important; float: none !important; margin-bottom: 20px; } /* Cards: remove any horizontal overflow */ .post-entry-card { overflow: hidden; border-radius: 4px; } /* Card images must always scale */ .post-entry-card img, .post-entry-card .img-responsive { width: 100%; max-width: 100%; height: auto; display: block; } /* Read-more link floated right causes layout issues at narrow widths */ .post-entry-card .read-more.pull-right { float: none !important; display: inline-block; margin-top: 8px; } /* Give post-info some breathing room */ .post-entry-card .post-info { padding: 12px 15px 15px; } .post-entry-card .post-title { font-size: 16px; line-height: 1.4; } .post-entry-card .post-excerpt { font-size: 14px; } /* Meta + read-more row: let them wrap */ .post-entry-card .post-meta { display: block; margin-bottom: 6px; } } /* ─── 4. ARTICLE / SINGLE-PAGE CONTENT ───────────────────── */ @media (max-width: 767px) { /* Sidebar stacks below article on mobile */ .col-md-9, .col-md-3 { width: 100% !important; padding-right: 15px; padding-left: 15px; } /* Article images must not overflow */ .entry-post img, .entry-post .img-responsive { width: 100% !important; height: auto !important; max-width: 100%; } /* Entry title sizing */ .entry-post .entry-title { font-size: 22px; line-height: 1.3; } .entry-post .entry-lead { font-size: 15px; } /* Sidebar recommended posts: stack thumbnails */ .recommended-posts .post-entry-sidebar { display: flex; gap: 10px; align-items: flex-start; } .recommended-posts .post-entry-sidebar img { width: 70px; height: auto; flex-shrink: 0; } } /* ─── 5. PARTNERS / SPONSORS SECTION ─────────────────────── */ @media (max-width: 767px) { /* Partners live inside .grid-item — already handled above. Extra rule to make partner logos fit nicely. */ .grid-item .post-entry-card img[alt="Scarpa"], .grid-item .post-entry-card img[alt="Black Diamond"], .grid-item .post-entry-card img[alt="Jack Black Beer"] { width: 100%; height: auto; object-fit: cover; } } /* ─── 6. FOOTER ──────────────────────────────────────────── */ @media (max-width: 767px) { footer .col-md-4 { width: 100% !important; margin-bottom: 24px; padding-right: 15px; padding-left: 15px; } footer .logo-footer { max-width: 160px; height: auto; } footer .contact-info { padding-left: 28px; } footer .footer-bottom { text-align: center; } footer .copyright-text.left { float: none !important; display: block; text-align: center; } } /* ─── 7. GLOBAL IMAGE SAFETY NET ─────────────────────────── */ /* Catch any image that might break out of its container */ img { max-width: 100%; height: auto; } /* ─── 8. TOUCH TARGET SIZES ──────────────────────────────── */ /* Buttons and links should be at least 44px tall for easy tapping */ @media (max-width: 767px) { .btn, .read-more, .navbar-brand, .breadcrumb a, footer a { min-height: 44px; line-height: 44px; display: inline-block; } /* Exception: inline text links don't need forced height */ p a, .post-excerpt a { min-height: auto; line-height: inherit; } } /* ─── 9. PREVENT HORIZONTAL SCROLL ──────────────────────── */ html, body { overflow-x: hidden; max-width: 100%; } /* ─── 10. PAGE CONTENT PADDING ───────────────────────────── */ @media (max-width: 767px) { .page-content { padding-top: 10px; } .page-content .container { padding-left: 12px; padding-right: 12px; } }