. */ .mp-glowna-pracownia__akapit--ostatni{ margin-bottom:26px; } /* -------------------------------------------------------------------------- 4. Rytm pionowy — marginesy widgetów -------------------------------------------------------------------------- Elementor zeruje marginesy KAŻDEGO widgetu w kontenerze regułą `.e-con .elementor-widget.elementor-widget{margin:0}` o szczegółowości (0,4,0). Klasa motywu na opakowaniu — (0,1,0) — nie ma z nią szans, więc cały rytm pionowy strony znikał: nagłówek przyklejał się do akapitu, akapit do przycisku, sekcje robiły się o kilkadziesiąt pikseli za niskie. Poniżej te same wartości co w glowna.css, wypowiedziane na tyle szczegółowo, żeby wygrały. Marginesy zerowe pomijamy — tam Elementor trafia w to samo. Test tests/jakosc/glowna-1-1.spec.js porównuje wyliczone style ze wzorcem, więc rozjazd wartości wyjdzie od razu. -------------------------------------------------------------------------- */ .elementor.elementor .e-con .mp-glowna-naglowek__oko{ margin:0 0 18px; } .elementor.elementor .e-con .mp-glowna-naglowek__lead{ margin:16px 0 0; } .elementor.elementor .e-con .mp-glowna-hero__lead{ margin:clamp(18px,2vw,28px) 0 0; } .elementor.elementor .e-con .mp-glowna-pracownia__tytul{ margin:0 0 26px; } .elementor.elementor .e-con .mp-glowna-pracownia__akapit{ margin:0 0 20px; } .elementor.elementor .e-con .mp-glowna-pracownia__akapit--ostatni{ margin:0 0 26px; } .elementor.elementor .e-con .mp-glowna-liczby__etykieta{ margin:12px 0 0; } .elementor.elementor .e-con .mp-glowna-autorka__rola{ margin:15px 0 0; } .elementor.elementor .e-con .mp-glowna-autorka__tresc{ margin:30px 0 28px; } .elementor.elementor .e-con .mp-glowna-firmy__tytul{ margin:0 0 16px; } .elementor.elementor .e-con .mp-glowna-firmy__lead{ margin:0 0 24px; } .elementor.elementor .e-con .mp-glowna-firmy__etykieta{ margin:11px 0 0; } .elementor.elementor .e-con .mp-glowna-kontakt__tytul{ margin:0 0 clamp(30px,4vw,52px); } .elementor.elementor .e-con .mp-glowna-kontakt__podtytul{ margin:0 0 22px; } /* -------------------------------------------------------------------------- 5. Napis nadtytułu -------------------------------------------------------------------------- glowna.css opisuje go selektorem `.mp-glowna-oko span`, który trafia w element wewnętrzny widgetu. Opakowanie zostawało z wysokością wiersza z (27 px zamiast 11) i rozpychało nadtytuł w każdej sekcji. -------------------------------------------------------------------------- */ .mp-glowna-oko__tekst{ font:400 11px/1 var(--mp-sans); letter-spacing:.15em; text-transform:uppercase; color:var(--mp-body); } .mp-glowna-oko--srodek .mp-glowna-oko__tekst{ line-height:1.6; } /* -------------------------------------------------------------------------- 6. Obrazy w kadrach o stałych proporcjach -------------------------------------------------------------------------- Elementor narzuca każdemu obrazowi `.elementor img{height:auto}` — szczegółowość (0,1,1). Kafle motywu (produktowy, seria) wpisują obraz w kadr o stałych proporcjach i dają mu height:100% selektorem klasowym (0,1,0), który tamtej reguły nie pokona. Skutek: obraz wychodził poza kadr (409×529 zamiast 409×281) i ilustracja w kaflu była w innej skali niż w projekcie. Kadr ma overflow:hidden, więc wysokość kafla się nie zmieniała — pomiar sekcji tego nie pokazywał. Widać było dopiero na obrazku. Od rundy 2 (punkt 1) wyjątków nie ma: kafel w galerii zakładek i kafel kompletów mają ten sam kadr 5:7 ze style.css, a plakat wypełnia go w całości. Dotąd galeria zakładek miała własną wysokość 300 px. -------------------------------------------------------------------------- */ .mp-glowna .mp-card__img, .mp-glowna .mp-glowna-seria__img{ height:100%; } /* -------------------------------------------------------------------------- 7. Portret autorki -------------------------------------------------------------------------- */ /* Portret wypełnia pudełko — height:100% z glowna.css przegrywało z `.elementor img{height:auto}` (0,1,1), przez co obraz miał naturalną wysokość zamiast wysokości kadru. */ .mp-glowna .mp-glowna-autorka__portret img{ height:100%; } /* Opakowanie widgetu „Obraz” wypada z układu (korekta, punkt 10). Wysokość pudełka portretu ma wyznaczać kolumna tekstu obok, a nie naturalna wysokość zdjęcia — opakowanie w przepływie rozpychałoby wiersz siatki do 1400 px. Zdjęcie w środku bierze pudełko opakowania za kadr. */ .mp-glowna-autorka__portret .elementor-widget-image{ position:absolute; inset:0; } /* -------------------------------------------------------------------------- 8. Telefon — te same progi co w glowna.css -------------------------------------------------------------------------- */ @media (max-width:860px){ .mp-glowna-kontakt__etykieta{ flex-basis:104px; } } @media (max-width:520px){ /* Kierunek znowu zmienną, nie własnością — reguła .e-con-full.e-flex ma (0,2,0) i wygrałaby także tutaj. */ .mp-glowna-kontakt__wiersz.e-con{ --flex-direction:column; gap:8px; } .mp-glowna-kontakt__etykieta{ flex-basis:auto; } }