/* * responsive-fixes.css * Kompleksowe poprawki układu i responsywności dla strony głównej * Dołącz JAKO OSTATNI plik CSS w , po style.css i mobile-fixes.css * Wymaga Bootstrap 5 */ /* ========================================= 0. RESET BAZOWY – zapobiega overflow-x ========================================= */ *, *::before, *::after { box-sizing: border-box; } html, body { overflow-x: hidden; max-width: 100%; } img { max-width: 100%; height: auto; } /* ========================================= 1. HEADER – stabilizacja na desktop i mobile ========================================= */ .header-wrapper { width: 100%; max-width: 100%; } /* Zapewnij pełną szerokość kontenera */ .custom-container, .container-fluid { width: 100%; max-width: 1400px; } /* ========================================= 2. SEKCJA TIMELINE – KOLOROWE KÓŁKA Główny problem: .event-description jest position:absolute i .circles-track używa flex (desktop) lub grid (mobile). Na tabletach kółka nachodzą na siebie lub wylatują poza ekran. ========================================= */ /* --- DESKTOP (> 1200px) --- */ .timeline-circles-section { overflow: visible; } .timeline-circles-container { max-width: 1400px; margin: 0 auto; padding: 0 20px; } /* Wrapper musi mieć wystarczającą wysokość na opisy nad/pod kółkami */ .timeline-circles-wrapper { min-height: 700px; overflow: visible; } /* Kółka nie nachodzą na siebie – zmniejsz margines na < 1400px */ @media only screen and (max-width: 1399px) and (min-width: 1201px) { .circle-event { margin: 0 15px; } .event-circle { width: 220px; height: 220px; } .circle-inner { width: 160px; height: 160px; } .circle-date { font-size: 36px; } .timeline-circles-wrapper { min-height: 620px; } } /* --- TABLET (768px – 1200px): 2 kółka w rzędzie --- */ @media only screen and (max-width: 1200px) { .timeline-circles-wrapper { min-height: auto; overflow: visible; padding: 140px 0 80px; } .circles-track { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 200px 60px; position: relative; } .circle-event { margin: 0 !important; position: relative; } /* Wszystkie opisy nad kółkiem */ .circle-event:nth-child(odd) .event-description, .circle-event:nth-child(even) .event-description { bottom: calc(100% + 110px) !important; top: auto !important; left: 50% !important; transform: translateX(-50%) !important; width: 260px !important; } /* Wszystkie linie idą w górę */ .circle-event:nth-child(odd) .event-connector, .circle-event:nth-child(even) .event-connector { bottom: 100% !important; top: auto !important; } .circle-event:nth-child(odd) .connector-dot, .circle-event:nth-child(even) .connector-dot { top: -8px !important; bottom: auto !important; } } /* --- MOBILE (< 768px): 1 kółko w rzędzie --- */ @media only screen and (max-width: 767px) { .timeline-circles-wrapper { padding: 160px 0 40px; } .circles-track { grid-template-columns: 1fr !important; gap: 180px !important; } .event-circle { width: 200px !important; height: 200px !important; margin: 0 auto; } .circle-inner { width: 145px !important; height: 145px !important; } .circle-date { font-size: 32px !important; } .circle-event:nth-child(odd) .event-description, .circle-event:nth-child(even) .event-description { width: 240px !important; } } @media only screen and (max-width: 479px) { .event-circle { width: 170px !important; height: 170px !important; } .circle-inner { width: 120px !important; height: 120px !important; } .circle-date { font-size: 26px !important; } .circle-event:nth-child(odd) .event-description, .circle-event:nth-child(even) .event-description { width: 200px !important; } } /* ========================================= 3. SEKCJA O PROGRAMIE – infografika (info-stream) Problem: min-width: 350px na stream-content powoduje overflow na wąskich ekranach. ========================================= */ .about-program-section { padding: 60px 40px; overflow: hidden; } /* Infografika – desktop */ .about-infographic { overflow: hidden; } /* Zapobiegaj wyjściu poza kontener */ .stream-content { min-width: 0 !important; width: calc(100% - 50px); max-width: 350px; } /* --- TABLET (< 1200px) --- */ @media only screen and (max-width: 1199px) { .about-content-wrapper { grid-template-columns: 1fr !important; gap: 60px !important; } .about-infographic { min-height: 420px; } .stream-content { max-width: 300px; } .info-stream:nth-child(1) { top: 0; } .info-stream:nth-child(2) { top: 105px; } .info-stream:nth-child(3) { top: 210px; } .info-stream:nth-child(4) { top: 315px; } } /* --- MOBILE (< 768px) --- */ @media only screen and (max-width: 767px) { .about-program-section { padding: 40px 20px !important; margin-top: 60px !important; margin-bottom: 60px !important; border-radius: 20px; } .about-infographic { min-height: 370px; } .stream-content { max-width: 240px; padding: 14px 18px !important; } .stream-text { font-size: 13px !important; } .stream-icon { width: 64px !important; height: 64px !important; margin-left: -32px !important; } .stream-icon i { font-size: 26px !important; } .info-stream:nth-child(1) { top: 0; } .info-stream:nth-child(2) { top: 90px; } .info-stream:nth-child(3) { top: 180px; } .info-stream:nth-child(4) { top: 270px; } } @media only screen and (max-width: 479px) { .about-infographic { min-height: 340px; } .stream-content { max-width: 200px; padding: 12px 14px !important; } .stream-text { font-size: 12px !important; } .stream-icon { width: 56px !important; height: 56px !important; margin-left: -28px !important; } .stream-icon i { font-size: 22px !important; } .info-stream:nth-child(1) { top: 0; } .info-stream:nth-child(2) { top: 80px; } .info-stream:nth-child(3) { top: 160px; } .info-stream:nth-child(4) { top: 240px; } } /* ========================================= 4. SEKCJA 4 MODUŁY – diagram z centralnym kółkiem Problem: position:absolute na module-branch wylatuje poza viewport na tabletach. Rozwiązanie: grid na < 1200px. ========================================= */ /* Desktop: zachowaj diagram z kółkiem w centrum */ .modules-section { overflow: hidden; } .modules-diagram { overflow: visible; } /* Zapewnij że gałęzie nie wychodzą poza sekcję na desktop */ @media only screen and (min-width: 1201px) { .modules-section { padding: 80px 60px; } .modules-diagram { max-width: 1200px; margin: 0 auto; } /* Zwiększ padding sekcji aby opisy nie były ucięte */ .top-branch .module-arrow, .bottom-branch .module-arrow { width: 340px; } .right-branch .module-arrow, .left-branch .module-arrow { width: 380px; } } /* --- TABLET (768px – 1200px): Lista pionowa --- */ @media only screen and (max-width: 1200px) { .modules-section { padding: 60px 30px !important; margin-top: 80px !important; margin-bottom: 80px !important; } .modules-header { margin-bottom: 60px; } .modules-diagram { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 30px !important; min-height: auto !important; position: static; } .central-circle { position: relative !important; width: 240px; height: 240px; order: 0; flex-shrink: 0; } .module-branch { position: relative !important; transform: none !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: 100%; max-width: 560px; } /* Porządek wizualny: góra → lewo → centrum → prawo → dół */ .top-branch { order: 1; } .left-branch { order: 2; } .central-circle { order: 3; } .right-branch { order: 4; } .bottom-branch { order: 5; } .module-arrow { width: 100% !important; max-width: 560px; margin: 0 auto; padding: 25px 25px !important; } } /* --- MOBILE (< 768px) --- */ @media only screen and (max-width: 767px) { .modules-section { padding: 50px 20px !important; margin-top: 60px !important; margin-bottom: 60px !important; border-radius: 20px; } .modules-title { font-size: 28px !important; } .modules-intro { font-size: 15px !important; } .central-circle { width: 200px; height: 200px; } .circle-icon-large { font-size: 48px; } .circle-title-large { font-size: 22px !important; } .module-arrow { padding: 20px 18px !important; } .module-name { font-size: 19px !important; } .module-description { font-size: 14px !important; } } /* ========================================= 5. SEKCJA DLA KOGO – grid beneficjentów Problem: repeat(3, 1fr) za ciasne na tabletach ========================================= */ .beneficiaries-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } @media only screen and (max-width: 1100px) { .beneficiaries-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; } } @media only screen and (max-width: 575px) { .beneficiaries-grid { grid-template-columns: 1fr !important; gap: 18px !important; } .beneficiary-box { padding: 30px 20px !important; } .box-title { min-height: auto !important; font-size: 18px !important; } .box-description { min-height: auto !important; } } /* ========================================= 6. SEKCJA CZYTAJ WIĘCEJ (READ MORE CARDS) Problem: card-connector ma margin: 0 -20px, a flex row powoduje overflow na tabletach ========================================= */ .read-more-cards { flex-wrap: wrap; justify-content: center; } /* Na tabletach i mobile – układ pionowy */ @media only screen and (max-width: 1100px) { .read-more-cards { flex-direction: column !important; align-items: center !important; gap: 30px !important; } .read-card { max-width: 520px !important; width: 100%; } .card-connector { margin: 0 !important; transform: rotate(90deg); } .card-title { min-height: auto !important; } .card-description { min-height: auto !important; } } @media only screen and (max-width: 575px) { .read-card { max-width: 100% !important; padding: 35px 20px !important; } } /* ========================================= 7. SEKCJA DOFINANSOWANIA – funding-grid ========================================= */ @media only screen and (max-width: 575px) { .funding-section { padding: 30px 16px !important; border-radius: 12px; } .funding-intro { padding: 20px 16px !important; } .funding-intro h3, .funding-intro-text { font-size: 16px !important; line-height: 1.5; } .funding-amount { font-size: 28px !important; } } /* ========================================= 8. KONSULTANCI – poprawka minmax Problem: minmax(400px, 1fr) daje overflow na mobile ========================================= */ .consultants-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: 30px; } @media only screen and (max-width: 575px) { .consultants-grid { grid-template-columns: 1fr !important; gap: 20px !important; } .consultant-section { padding: 35px 16px !important; border-radius: 12px; } .consultant-title { font-size: 22px !important; } } /* ========================================= 9. SLIDER – poprawki dla mobile ========================================= */ @media only screen and (max-width: 767px) { .sliderone-slingle { height: auto !important; min-height: 540px; } .sliderone-content { flex-wrap: wrap; } .sliderone-content .slider-content { width: 100% !important; } } @media only screen and (max-width: 575px) { .sliderone-slingle { min-height: 480px; } .sliderone-content .slider-image { display: none; } } /* ========================================= 10. SEKCJA TIMELINE INFO (blok wyjaśnień) Problem: grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) powoduje overflow na wąskich ekranach ========================================= */ .timeline-info-grid { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); } @media only screen and (max-width: 575px) { .timeline-info-section { padding: 30px 20px !important; border-radius: 16px; } .timeline-info-title { font-size: 22px !important; } } /* ========================================= 11. FOOTER – poprawki ========================================= */ @media only screen and (max-width: 767px) { .footer-bottom { flex-wrap: wrap; gap: 24px; } .footer-copyright-inner { flex-direction: column; text-align: center; gap: 8px; } } /* ========================================= 12. GLOBALNE SEKCJE – overflow protection ========================================= */ .timeline-circles-section, .about-program-section, .modules-section, .for-whom-section, .read-more-section, .funding-section, .consultant-section { max-width: 100%; } /* Zapobiegaj wyjściu kontenerów poza viewport */ .container, .container-fluid, .custom-container { max-width: 1400px; } /* Wymuś że żaden element nie przekracza szerokości rodzica */ @media only screen and (max-width: 767px) { section, div, article { max-width: 100vw; } } /* ========================================= 13. NAGŁÓWKI – skalowanie typografii ========================================= */ @media only screen and (max-width: 767px) { .timeline-header h1 { font-size: 28px !important; line-height: 1.3; } .timeline-header p { font-size: 16px !important; } .about-title { font-size: 28px !important; } .modules-title { font-size: 28px !important; } .for-whom-title { font-size: 28px !important; } .read-more-title { font-size: 28px !important; } .timeline-info-title { font-size: 24px !important; } } @media only screen and (max-width: 479px) { .timeline-header h1, .about-title, .modules-title, .for-whom-title, .read-more-title { font-size: 24px !important; } }