i wypełnienie w kontenerze wpisu); to one zostawiały białe pasy nad paskiem i pod stopką. Zerujemy wyłącznie opakowania motywu, nasze sekcje zostają nietknięte. ───────────────────────────────────────────────────────────────────── */ /* 1. nagłówek i stopka motywu */ .wp-site-blocks > header.wp-block-template-part, .wp-site-blocks > footer.wp-block-template-part { display: none !important; } /* 2. tytuł strony wypisywany przez motyw nad treścią */ .wp-site-blocks .wp-block-post-title { display: none !important; } /* 3. białe pasy: odstępy opakowań motywu */ .wp-site-blocks { padding-top: 0 !important; padding-bottom: 0 !important; } .wp-site-blocks > * { margin-block-start: 0 !important; margin-block-end: 0 !important; } .wp-site-blocks > main { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } .wp-site-blocks > main > .wp-block-group, .wp-site-blocks > main > .wp-block-query, .wp-site-blocks > main .wp-block-post-content { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* 4. boczne wypełnienie motywu — nasze sekcje idą na całą szerokość i mają własne marginesy wewnętrzne */ .wp-site-blocks > main.has-global-padding { padding-left: 0 !important; padding-right: 0 !important; } .wp-site-blocks > main .entry-content > .alignfull { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: none !important; } /* 5. alignfull motywu — źródło poziomego przewijania. Motyw blokowy rozciąga treść na całą szerokość ujemnym marginesem równym bocznemu wypełnieniu strony (--wp--style--root-padding-*). Punkt 4 to wypełnienie zeruje, a ujemny margines zostawał: strona robiła się o ok. 100 px szersza od ekranu i dawała się przewijać w bok — na każdej szerokości, nie tylko na tablecie. Zerujemy więc i zmienne, i same marginesy. */ .wp-site-blocks, body{ --wp--style--root-padding-left: 0px !important; --wp--style--root-padding-right: 0px !important; } .wp-site-blocks main > .alignfull, .wp-site-blocks main > .wp-block-group.alignfull, .wp-site-blocks .entry-content.alignfull{ margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; max-width: none !important; } /* 6. inny motyw niż blokowy — nagłówek i stopka pod innymi nazwami. Nasze sekcje mają własne klasy (kb-… i estet-…), więc te selektory ich nie dotykają. Blok szablonu wycina teraz także sama wtyczka, po stronie serwera; to jest siatka bezpieczeństwa. */ header.wp-block-template-part, footer.wp-block-template-part, #masthead, #colophon, .site-header, .site-footer{ display: none !important; } /* 7. białe szczeliny między sekcjami. Motyw rozstawia bloki treści odstępem 1,2 rem (--wp--style--block-gap) — między paskiem a powitaniem, między każdą sekcją i przed stopką pojawiał się 19-pikselowy pasek w kolorze tła , czyli biały. Nasze sekcje mają własne wypełnienia, więc odstęp motywu zerujemy, a tło strony ustawiamy na krem sekcji — gdyby gdzieś prześwitywało, prześwituje tym samym kolorem. */ .wp-site-blocks .entry-content > .alignfull, .wp-site-blocks .entry-content > :first-child{ margin-block-start:0 !important; margin-block-end:0 !important; } .wp-site-blocks main, .wp-site-blocks main > .wp-block-group, .wp-site-blocks .entry-content{ margin-block:0 !important; padding-block:0 !important; } body, .wp-site-blocks{ background:#F7F5F0 !important; } /* siatka bezpieczeństwa: gdyby cokolwiek jeszcze wystawało poza ekran, telefon nie pomniejszy całej strony */ html, body{ overflow-x: clip; } /* ── Tablet w pionie (iPad) ─────────────────────────────────────────── Od 782 px WordPress stawia kolumny obok siebie, co na iPadzie w pionie daje wąskie słupki. Do 1024 px układamy je jedna pod drugą; pasek górny i pas atutów zostają w rzędzie, bo mieszczą się bez problemu. */ @media (min-width:782px) and (max-width:1024px){ .kb-sekcja > .wp-block-columns:not(.kb-pasek):not(.is-not-stacked-on-mobile){ flex-wrap:wrap !important; } .kb-sekcja > .wp-block-columns:not(.kb-pasek):not(.is-not-stacked-on-mobile) > .wp-block-column{ flex-basis:100% !important; } .kb-foto-prosta, .kb-film-ramka{ max-width:440px; margin-left:auto !important; margin-right:auto !important; } .kb-mapa-ramka{ min-height:340px; width:100% !important; } .kb-mapa-ramka iframe{ width:100% !important; } }