/** * Bethbau – mobil és tablet nézet javítások * * Miért kell: az oldal dizájnja végig kézzel beállított negatív margókra épül * (pl. margin-top: -97px, margin-left: -130px), hogy az elemek asztali nézetben * egymás mellé/fölé kerüljenek. Ezek fix pixelértékek töréspontonként, ezért * amint a szöveg kisebb kijelzőn máshogy tördel, az elemek egymásra csúsznak, * kilógnak a képernyőről vagy levágódnak. Több modulnál a Divi 100%-nál nagyobb * szélességet (150–300%) kapott, ami a szűk oszlopokban 0 széles szövegdobozt * eredményez – ilyenkor a szöveg karakterenként tördel egy függőleges oszlopba. * * A Divi oldalanként újraszámozza a modulosztályokat (.et_pb_row_5 mást * jelent a főoldalon és mást a kapcsolat oldalon), ezért az oldalspecifikus * szabályok body.page-id-XX elé vannak zárva. Globális csak a fejléc, a * lábléc és a vízszintes túlcsordulás elleni védőszabály. * * Minden szabály töréspontba van zárva, az asztali nézetet (>980px) nem érinti. * Visszavonás: a bethbau-mobile-fixes.php és ez a mappa törlése. */ /* ========================================================================== TELEFON (<= 767px) ========================================================================== */ @media only screen and (max-width: 767px) { /* Védőszabály: egyetlen elrontott negatív margó se okozzon vízszintes oldalgörgetést. * * FONTOS: csak a tartalmi szekciókra (.et-l--post), a fejlécre és a * láblécre NEM. A mobil menü listája position:fixed, és iOS Safariban * egy overflow:clip ősben lévő fixed elem nem rajzolódik ki, amíg egy * görgetés ki nem kényszeríti az újrarajzolást – emiatt a hamburgerre * koppintva „nem történt semmi", és a menü csak görgetésre jelent meg. */ body #page-container .et-l--post .et_pb_section { overflow-x: clip; } /* ------------------------------------------------------------------ * Egységes szélesség telefonon * * A Divi alapértelmezett sorszélessége 80% (oldalanként 10% margó), * a kapcsolat szekció viszont 92%-on áll. Az itt felsorolt sorok * ehhez a 92%-hoz igazodnak, hogy a szekciók azonos távolságra * legyenek a képernyő szélétől. * * Új szekció hozzáadása: keresd meg a szekció .et_pb_row_XX * osztályát, és vedd fel ebbe a felsorolásba. * ---------------------------------------------------------------- */ body.page-id-40 #page-container .et_pb_row.et_pb_row_2, /* PARTNEREINK & ÜGYFELEINK – cím */ body.page-id-40 #page-container .et_pb_row.et_pb_row_3, /* partner logók */ body.page-id-40 #page-container .et_pb_row.et_pb_row_4, /* MÉRNÖKI SZOLGÁLTATÁSAINK – cím */ body.page-id-40 #page-container .et_pb_row.et_pb_row_5, /* LAKOSSÁG + BERUHÁZÓK kártyák */ body.page-id-40 #page-container .et_pb_row.et_pb_row_10, /* KÖZIGAZGATÁS kártya */ body.page-id-40 #page-container .et_pb_row.et_pb_row_18, /* RÓLUNK felirat */ body.page-id-40 #page-container .et_pb_row.et_pb_row_20, /* MIÉRT MINKET VÁLASSZON? – cím + bevezető */ body.page-id-40 #page-container .et_pb_row.et_pb_row_21, /* MIÉRT MINKET VÁLASSZON? – kártyák */ body.page-id-40 #page-container .et_pb_row.et_pb_row_22, /* AZ EGYÜTTMŰKÖDÉS MENETE – cím */ body.page-id-40 #page-container .et_pb_row.et_pb_row_23, /* AZ EGYÜTTMŰKÖDÉS MENETE – képek + kártyák */ body.page-id-40 #page-container .et_pb_row.et_pb_row_28, /* MIT MONDANAK ÜGYFELEINK – fejléc */ body.page-id-40 #page-container .et_pb_row.et_pb_row_29, /* MIT MONDANAK ÜGYFELEINK – karusszel */ body.page-id-40 #page-container .et_pb_row.et_pb_row_35, /* GYAKRAN ISMÉTELT KÉRDÉSEK – „INFORMÁCIÓ" felirat */ body.page-id-40 #page-container .et_pb_row.et_pb_row_37, /* GYAKRAN ISMÉTELT KÉRDÉSEK */ body.page-id-40 #page-container .et_pb_row.et_pb_row_38 { /* ELÉRHETŐSÉGEK + űrlap */ width: 92% !important; max-width: 92% !important; } /* Lábléc – minden oldalon ugyanaz a sablon, ezért nem oldalfüggő. */ body #page-container .et_pb_row.et_pb_row_0_tb_footer, body #page-container .et_pb_row.et_pb_row_1_tb_footer { width: 92% !important; max-width: 92% !important; } /* A copyright sávnak 50-50px belső margója volt egy 11px magas sorhoz – telefonon fölösleges üres hely az oldal alján. */ body #page-container .et_pb_section.et_pb_section_1_tb_footer { padding-top: 24px !important; padding-bottom: 24px !important; } /* KINEK KELL STATIKUS? – a fejléckép 389x498-as fotó volt 375x755-re nyújtva (object-fit: fill), vagyis torzult, és másfél képernyőnyi görgetést vett el. Fix magasság + cover: arányhelyes és kompakt. Az oszlop 500px-es min-height-je 438px üres helyet hagyott alatta. */ body.page-id-40 #page-container .et_pb_image.et_pb_image_12 { height: 320px !important; max-height: 320px !important; overflow: hidden !important; } body.page-id-40 #page-container .et_pb_image_12 img { width: 100% !important; height: 100% !important; max-height: 100% !important; object-fit: cover !important; object-position: center 40% !important; } body.page-id-40 #page-container .et_pb_column.et_pb_column_18 { min-height: 0 !important; height: auto !important; } /* KINEK KELL STATIKUS? – a szövegoszlopnak 50px belső margója volt, ettől keskenyebb volt a tartalom, mint a többi szekcióban. (A fölötte lévő kép szándékosan teljes szélességű marad.) */ body.page-id-40 #page-container .et_pb_column.et_pb_column_19 { padding-left: 15px !important; padding-right: 15px !important; } /* A „MI AZ A BÉTH-BAU?" gomb felirata levágódott (max-width:50%), a gomb pedig balra kilógott a szöveg alól. */ body.page-id-40 #page-container .et_pb_button_4_wrapper { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; text-align: left !important; } body.page-id-40 #page-container .et_pb_section .et_pb_button.et_pb_button_4 { width: auto !important; max-width: 100% !important; white-space: nowrap !important; margin-left: 0 !important; margin-right: auto !important; } /* A vélemény karusszelnek saját eltolása volt (margin-left:-14px, margin-right:25px), a kártyáknak pedig margin-left:35px – emiatt a sor szélesítése után sem értek a szekció széléig. */ body.page-id-40 #page-container .et_pb_group_carousel.et_pb_group_carousel_1 { margin-left: 0 !important; margin-right: 0 !important; } body.page-id-40 #page-container .et_pb_column.et_pb_column_50, body.page-id-40 #page-container .et_pb_column.et_pb_column_53, body.page-id-40 #page-container .et_pb_column.et_pb_column_56 { margin-left: 0 !important; } /* ------------------------------------------------------------------ * Fejléc * * A felső sáv (nyitvatartás + e-mail + közösségi ikonok) telefonon * rejtve – nem fért el, az e-mail a Facebook ikon alá futott. * Az adatok megvannak a kapcsolat szekcióban és a láblécben is. * * A fejléc sora 80%-on állt, ezért a logó, a gomb és a hamburger * összeszorult. 92%-on a többi szekcióval is egy vonalba kerül. * * A hamburger ikon és az „Árajánlatkérés" gomb helyet cserél: * logó – gomb – hamburger. * ---------------------------------------------------------------- */ body #page-container .et_pb_section.et_pb_section_0_tb_header { display: none !important; } body #page-container .et_pb_row.et_pb_row_1_tb_header { width: 92% !important; max-width: 92% !important; } body #page-container .et_pb_column_5_tb_header > .et_pb_menu.et_pb_menu_0_tb_header { order: 2 !important; flex: 0 0 auto !important; width: auto !important; } /* Az „Árajánlatkérés" gomb telefonon rejtve – kis képernyőn sok volt a logó és a hamburger mellett. (Az order/margin szabályok maradnak, hogy a gomb visszakapcsolása esetén a helyére kerüljön.) */ body #page-container .et_pb_column_5_tb_header > .et_pb_button_module_wrapper { display: none !important; order: 1 !important; margin-left: auto !important; } /* Kisebb gomb, hogy 360px-en is elférjen a logó mellett */ body #page-container .et_pb_section .et_pb_button.et_pb_button_0_tb_header { font-size: 12px !important; padding-left: 14px !important; padding-right: 14px !important; } /* ------------------------------------------------------------------ * Hero szekció * ---------------------------------------------------------------- */ /* A képkollázs 135% széles volt, mindkét oldalon levágódott */ body.page-id-40 #page-container .et_pb_image.et_pb_image_0 { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; } /* ------------------------------------------------------------------ * Hero sorrend: szöveg -> gombok -> képek * * A gombsor külön sorban van (row_1), a szöveg és a képek pedig a * row_0 két oszlopában. Eredetileg a gombokat egy -274px-es margó * húzta a helyére, ami minden szélességen elcsúszott (360px-en a * gomb rálógott a bekezdés utolsó sorára). * * A display:contents feloldja a row_0-t, így mindhárom blokk a * szekció közvetlen flex gyereke lesz, és order-rel sorba rendezhető. * Így nincs fix pixeles eltolás – 360px-től 767px-ig végig stabil. * ---------------------------------------------------------------- */ body.page-id-40 #page-container .et_pb_row.et_pb_row_0 { display: contents !important; } body.page-id-40 #page-container .et_pb_column.et_pb_column_0 { /* szöveg */ order: 1 !important; width: 92% !important; max-width: 92% !important; } body.page-id-40 #page-container .et_pb_row.et_pb_row_1 { /* gombok */ order: 2 !important; width: 92% !important; max-width: 92% !important; margin-top: -34px !important; } body.page-id-40 #page-container .et_pb_column.et_pb_column_2 { margin-top: 0 !important; } body.page-id-40 #page-container .et_pb_column.et_pb_column_1 { /* képek + badge-ek */ order: 3 !important; width: 92% !important; max-width: 92% !important; margin-top: 18px !important; } /* A forgó BB pecsét telefonon rejtve (kérésre) */ body.page-id-40 #page-container .et_pb_image.et_pb_image_2 { display: none !important; } /* Nagyobb hero képek. A Divi képkeretének szélessége nem írható felül (width/max-width hatástalan), ezért transform: scale – ez ráadásul nem befolyásolja az elrendezést, így a fenti sorrend stabil marad. */ body.page-id-40 #page-container .et_pb_image_0 .et_pb_image_wrap { transform: scale(1.28) !important; transform-origin: right center !important; } body.page-id-40 #page-container .et_pb_image_1 .et_pb_image_wrap { transform: scale(1.22) !important; transform-origin: left center !important; } body.page-id-40 #page-container .et_pb_image.et_pb_image_1 { margin-left: 0 !important; /* -20px-szel kilógott balra */ } /* "KERESSEN MINKET" felirata kilógott a pirulából */ body.page-id-40 #page-container .et_pb_section .et_pb_button.et_pb_button_1 { white-space: nowrap !important; width: auto !important; max-width: 100% !important; } body.page-id-40 #page-container .et_pb_section .et_pb_button.et_pb_button_2 { width: auto !important; max-width: 100% !important; } /* Lebegő badge-ek: eredetileg a szövegre lógtak és kilógtak a képernyőről. Áthelyezve a képkollázs fölé, transform-mal (nem befolyásolja az elrendezést). */ body.page-id-40 #page-container .et_pb_image.et_pb_image_2 { /* forgó BB pecsét */ transform: translate(217px, 121px) !important; } body.page-id-40 #page-container .et_pb_icon_list_item_0 { /* ORSZÁGOS LEFEDETTSÉG */ transform: translate(-38px, 88px) !important; /* a nagy kép felső széléhez */ width: 172px !important; } body.page-id-40 #page-container .et_pb_icon_list_item_1 { /* GYORS, PONTOS HATÁRIDŐK */ transform: translate(20px, 68px) !important; /* félúton a két kép között */ } body.page-id-40 #page-container .et_pb_text.et_pb_text_1, /* ÉV SZAKMAI TAPASZTALAT */ body.page-id-40 #page-container .et_pb_text.et_pb_text_2 { /* 15+ */ transform: translate(-48px, 25px) !important; /* a kis kép alsó széléhez */ } /* A partnerek szekciónak 300px felső margója volt – telefonon indokolatlanul nagy üres sáv keletkezett a hero alatt. */ body.page-id-40 #page-container .et_pb_section.et_pb_section_1 { margin-top: 40px !important; } /* A "15+ ÉV SZAKMAI TAPASZTALAT" pirula felirata ne vágódjon le */ body.page-id-40 #page-container .et_pb_text.et_pb_text_1 { overflow: visible !important; } body.page-id-40 #page-container .et_pb_text_1 .et_pb_text_inner { width: auto !important; } /* ------------------------------------------------------------------ * Szolgáltatás kártyák (LAKOSSÁG / BERUHÁZÓK / KÖZIGAZGATÁS) * A leírások 150–300% szélesek voltak, a BERUHÁZÓK kártya szövege * karakterenként egy sorban jelent meg. * ---------------------------------------------------------------- */ body.page-id-40 #page-container .et_pb_text.et_pb_text_3, body.page-id-40 #page-container .et_pb_text.et_pb_text_5, body.page-id-40 #page-container .et_pb_text.et_pb_text_7 { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-right: 0 !important; } body.page-id-40 #page-container .et_pb_text_3 .et_pb_text_inner, body.page-id-40 #page-container .et_pb_text_5 .et_pb_text_inner, body.page-id-40 #page-container .et_pb_text_7 .et_pb_text_inner { width: 100% !important; } body.page-id-40 #page-container .et_pb_row.et_pb_row_7 { width: 100% !important; max-width: 100% !important; } /* A dekoratív nagy "02" szám elszorította a szöveget – telefonon rejtve */ body.page-id-40 #page-container .et_pb_heading.et_pb_heading_5 { display: none !important; } body.page-id-40 #page-container .et_pb_heading.et_pb_heading_6 { margin-top: 0 !important; margin-left: 0 !important; } body.page-id-40 #page-container .et_pb_text.et_pb_text_5 { margin-top: 6px !important; } /* KÖZIGAZGATÁS: a cím jobbra levágódott, a gomb felirata nem fért el */ body.page-id-40 #page-container .et_pb_heading.et_pb_heading_7 { margin-left: 0 !important; width: auto !important; max-width: 100% !important; } body.page-id-40 #page-container .et_pb_button_3_wrapper { width: 100% !important; max-width: 100% !important; text-align: left !important; } body.page-id-40 #page-container .et_pb_section .et_pb_button.et_pb_button_3 { white-space: nowrap !important; width: auto !important; max-width: 100% !important; margin-left: 16px !important; /* a kártya tartalmának vonalába */ margin-right: auto !important; } /* ------------------------------------------------------------------ * A három szolgáltatás kártya egységes szélessége és belső margója. * Eredetileg mindhárom másképp állt: 50px bal / 20–30px jobb belső * margó, a KÖZIGAZGATÁS kártya pedig 30px-szel keskenyebb volt. * ---------------------------------------------------------------- */ body.page-id-40 #page-container .et_pb_row.et_pb_row_10 { padding-left: 0 !important; padding-right: 0 !important; } body.page-id-40 #page-container .et_pb_column.et_pb_column_6, body.page-id-40 #page-container .et_pb_column.et_pb_column_10 { padding-left: 24px !important; padding-right: 24px !important; } body.page-id-40 #page-container .et_pb_row.et_pb_row_11 { padding-left: 24px !important; padding-right: 24px !important; } body.page-id-40 #page-container .et_pb_row.et_pb_row_6, body.page-id-40 #page-container .et_pb_row.et_pb_row_8 { margin-left: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } body.page-id-40 #page-container .et_pb_row.et_pb_row_9 { width: 100% !important; max-width: 100% !important; } body.page-id-40 #page-container .et_pb_column.et_pb_column_12 { padding-left: 0 !important; } /* A LAKOSSÁG kártya fotója 3px-szel balra lógott és 21px-szel túlért a szöveg jobb szélén */ body.page-id-40 #page-container .et_pb_image.et_pb_image_10 { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; } /* KÖZIGAZGATÁS: ikon a kártya belső széléhez, a szöveg mellé */ body.page-id-40 #page-container .et_pb_image.et_pb_image_11 { margin-left: 0 !important; } body.page-id-40 #page-container .et_pb_column.et_pb_column_16 { margin-left: 67px !important; } /* ------------------------------------------------------------------ * Folyamat kártyák (AJÁNLATKÉRÉS / KONZULTÁCIÓ / TERVEZÉS / ÁTADÁS) * A kártyák 400px szélesek voltak egy 300px-es oszlopban, balra * kicsúsztak a képernyőről, a szövegük karakterenként tördelt. * ---------------------------------------------------------------- */ body.page-id-40 #page-container .et_pb_row.et_pb_row_24, body.page-id-40 #page-container .et_pb_row.et_pb_row_25, body.page-id-40 #page-container .et_pb_row.et_pb_row_26, body.page-id-40 #page-container .et_pb_row.et_pb_row_27 { width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; min-height: 0 !important; flex-wrap: nowrap !important; align-items: flex-start !important; column-gap: 12px !important; margin-left: 0 !important; margin-right: 0 !important; padding: 18px 16px !important; overflow: visible !important; align-self: stretch !important; } /* ikon oszlop */ body.page-id-40 #page-container .et_pb_row_24 > .et_pb_column_35, body.page-id-40 #page-container .et_pb_row_25 > .et_pb_column_38, body.page-id-40 #page-container .et_pb_row_26 > .et_pb_column_41, body.page-id-40 #page-container .et_pb_row_27 > .et_pb_column_44 { flex: 0 0 46px !important; width: 46px !important; max-width: 46px !important; } /* tartalom oszlop – container-query kontextus, lásd alább. A row-gap alapból 30px volt, ettől a leírás túl messze került a kártya címétől. */ body.page-id-40 #page-container .et_pb_row_24 > .et_pb_column_36, body.page-id-40 #page-container .et_pb_row_25 > .et_pb_column_39, body.page-id-40 #page-container .et_pb_row_26 > .et_pb_column_42, body.page-id-40 #page-container .et_pb_row_27 > .et_pb_column_45 { flex: 1 1 auto !important; width: auto !important; max-width: none !important; min-width: 0 !important; row-gap: 0 !important; container-type: inline-size; } /* dekoratív nagy sorszám (01–04) oszlopa */ body.page-id-40 #page-container .et_pb_row_24 > .et_pb_column_37, body.page-id-40 #page-container .et_pb_row_25 > .et_pb_column_40, body.page-id-40 #page-container .et_pb_row_26 > .et_pb_column_43, body.page-id-40 #page-container .et_pb_row_27 > .et_pb_column_46 { display: none !important; } body.page-id-40 #page-container .et_pb_icon_7, body.page-id-40 #page-container .et_pb_icon_8, body.page-id-40 #page-container .et_pb_icon_9, body.page-id-40 #page-container .et_pb_icon_10 { margin-top: 0 !important; margin-left: 0 !important; } body.page-id-40 #page-container .et_pb_heading_18, body.page-id-40 #page-container .et_pb_heading_20, body.page-id-40 #page-container .et_pb_heading_22, body.page-id-40 #page-container .et_pb_heading_24 { margin-top: 0 !important; margin-left: 0 !important; } body.page-id-40 #page-container .et_pb_heading_18 .et_pb_heading_container h1, body.page-id-40 #page-container .et_pb_heading_20 .et_pb_heading_container h1, body.page-id-40 #page-container .et_pb_heading_22 .et_pb_heading_container h1, body.page-id-40 #page-container .et_pb_heading_24 .et_pb_heading_container h1 { font-size: 16px !important; } body.page-id-40 #page-container .et_pb_text.et_pb_text_16, body.page-id-40 #page-container .et_pb_text.et_pb_text_17, body.page-id-40 #page-container .et_pb_text.et_pb_text_18, body.page-id-40 #page-container .et_pb_text.et_pb_text_19 { margin-left: 0 !important; margin-top: 6px !important; } /* A Divi ezeknél a moduloknál 250%-os szélességet állít be, amit sem a width, sem a max-width felülírása nem old fel; a belső szövegdoboz így 0 széles marad. A container query egység (cqw) az oszlop tényleges szélességéhez igazít, ez a működő megoldás. */ body.page-id-40 #page-container .et_pb_heading_18 .et_pb_heading_container, body.page-id-40 #page-container .et_pb_heading_20 .et_pb_heading_container, body.page-id-40 #page-container .et_pb_heading_22 .et_pb_heading_container, body.page-id-40 #page-container .et_pb_heading_24 .et_pb_heading_container, body.page-id-40 #page-container .et_pb_text_16 .et_pb_text_inner, body.page-id-40 #page-container .et_pb_text_17 .et_pb_text_inner, body.page-id-40 #page-container .et_pb_text_18 .et_pb_text_inner, body.page-id-40 #page-container .et_pb_text_19 .et_pb_text_inner { width: 100cqw !important; max-width: 100cqw !important; } /* ------------------------------------------------------------------ * Kapcsolat szekció (ELÉRHETŐSÉGEK / INDÍTSUK EL A PROJEKTET) * ---------------------------------------------------------------- */ /* (a 92%-os sorszélesség a fenti közös blokkban van) */ body.page-id-40 #page-container .et_pb_column.et_pb_column_63, body.page-id-40 #page-container .et_pb_column.et_pb_column_72 { padding-top: 40px !important; padding-right: 24px !important; padding-bottom: 40px !important; padding-left: 24px !important; border-radius: 35px !important; } body.page-id-40 #page-container .et_pb_heading.et_pb_heading_36, body.page-id-40 #page-container .et_pb_heading.et_pb_heading_37 { margin-left: 0 !important; margin-right: 0 !important; } body.page-id-40 #page-container .et_pb_heading.et_pb_heading_37 { margin-top: 0 !important; margin-bottom: 14px !important; } /* Az "ELÉRHETŐSÉGEK" előtti zöld vonal -29px margóval kilógott a kártyából */ body.page-id-40 #page-container .et_pb_divider.et_pb_divider_8 { margin-left: 0 !important; } /* IRODA / TELEFON / E-MAIL: ikon + szöveg egymás mellett, átfedés nélkül */ body.page-id-40 #page-container .et_pb_row.et_pb_row_41, body.page-id-40 #page-container .et_pb_row.et_pb_row_42, body.page-id-40 #page-container .et_pb_row.et_pb_row_43 { flex-wrap: nowrap !important; align-items: flex-start !important; column-gap: 14px !important; --horizontal-gap: 0px; margin-top: 0 !important; margin-bottom: 24px !important; } body.page-id-40 #page-container .et_pb_row_41 > .et_pb_column.et_pb_column_66, body.page-id-40 #page-container .et_pb_row_42 > .et_pb_column.et_pb_column_68, body.page-id-40 #page-container .et_pb_row_43 > .et_pb_column.et_pb_column_70 { flex: 0 0 50px !important; width: 50px !important; max-width: 50px !important; min-width: 50px !important; } body.page-id-40 #page-container .et_pb_row_41 > .et_pb_column.et_pb_column_67, body.page-id-40 #page-container .et_pb_row_42 > .et_pb_column.et_pb_column_69, body.page-id-40 #page-container .et_pb_row_43 > .et_pb_column.et_pb_column_71 { flex: 1 1 auto !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin-top: 0 !important; row-gap: 0 !important; } body.page-id-40 #page-container .et_pb_icon.et_pb_icon_26, body.page-id-40 #page-container .et_pb_icon.et_pb_icon_27, body.page-id-40 #page-container .et_pb_icon.et_pb_icon_28 { margin-top: 0 !important; margin-left: 0 !important; } body.page-id-40 #page-container .et_pb_heading.et_pb_heading_38, body.page-id-40 #page-container .et_pb_heading.et_pb_heading_39, body.page-id-40 #page-container .et_pb_heading.et_pb_heading_40 { margin-top: 0 !important; margin-left: 0 !important; margin-bottom: 4px !important; } body.page-id-40 #page-container .et_pb_text.et_pb_text_29, body.page-id-40 #page-container .et_pb_text.et_pb_text_30, body.page-id-40 #page-container .et_pb_text.et_pb_text_31, body.page-id-40 #page-container .et_pb_text.et_pb_text_32 { margin-top: 0 !important; margin-left: 0 !important; margin-bottom: 0 !important; } body.page-id-40 #page-container .et_pb_text.et_pb_text_31 { margin-top: 2px !important; } body.page-id-40 #page-container .et_pb_text_32 .et_pb_text_inner, body.page-id-40 #page-container .et_pb_text_29 .et_pb_text_inner { overflow-wrap: anywhere; } /* Ajánlatkérő űrlap: a fél szélességű mezők telefonon egész szélesek */ body.page-id-40 #page-container .et_pb_contact_form_0 .et_pb_contact_field.et_pb_contact_field_0, body.page-id-40 #page-container .et_pb_contact_form_0 .et_pb_contact_field.et_pb_contact_field_1 { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; } body.page-id-40 #page-container .et_pb_contact_form_0 .et_pb_contact_form { row-gap: 6px !important; } } /* ========================================================================== TABLET (768px – 980px) ========================================================================== */ @media only screen and (min-width: 768px) and (max-width: 980px) { /* Csak a tartalmi szekciókra – lásd az indoklást a telefonos blokkban. */ body #page-container .et-l--post .et_pb_section { overflow-x: clip; } /* ------------------------------------------------------------------ * Fejléc felső sáv: az e-mail a nyitvatartásra futott, * a Facebook és az Instagram ikon egymáson volt * * A -82px-es bal margó mostanra megfordította a hibát: a * „titkarsag@bethbau.hu” 52px-szel ráfutott a „H-P: 08:00 – 14:00” * feliratra a teljes 768–980px sávban. Margó nélkül a két elem * között 30px marad, ugyanannyi, mint asztali nézetben. * ---------------------------------------------------------------- */ body #page-container .et_pb_icon_list_item_1_tb_header { margin-left: 0 !important; } /* A nyitvatartás 900px alatt két sorba tört, az e-mail viszont egysoros maradt, ezért a két felirat nem egy vonalban állt. */ body #page-container .et_pb_icon_list_item_0_tb_header .et_pb_icon_list_text, body #page-container .et_pb_icon_list_item_1_tb_header .et_pb_icon_list_text { white-space: nowrap !important; } /* A Facebook ikon 24px-es eltolasa torolve: a fejleces ikonok geometriaja rendbe lett teve (nincs tobbe negativ margo es 25% modulszelesseg), igy a kompenzacio plusz rest okozna. */ /* ------------------------------------------------------------------ * Hero: a forgó BB pecsét belelógott a fejlécsávba, * a KERESSEN gomb felirata kilógott a pirulából * ---------------------------------------------------------------- */ body.page-id-40 #page-container .et_pb_image.et_pb_image_2 { margin-top: -455px !important; margin-left: 0 !important; } body.page-id-40 #page-container .et_pb_section .et_pb_button.et_pb_button_1 { white-space: nowrap !important; width: auto !important; max-width: 100% !important; } body.page-id-40 #page-container .et_pb_button_1_wrapper { width: auto !important; } /* ------------------------------------------------------------------ * Szolgáltatás kártya: a BERUHÁZÓK kártya szövege alul levágódott * ---------------------------------------------------------------- */ body.page-id-40 #page-container .et_pb_row.et_pb_row_8, body.page-id-40 #page-container .et_pb_column.et_pb_column_12 { height: auto !important; max-height: none !important; } /* ------------------------------------------------------------------ * Folyamat kártyák: ráúsztak a képkollázsra, a szövegük levágódott * (fix 120px kártyamagasság + overflow:hidden) * ---------------------------------------------------------------- */ body.page-id-40 #page-container .et_pb_row.et_pb_row_24, body.page-id-40 #page-container .et_pb_row.et_pb_row_25, body.page-id-40 #page-container .et_pb_row.et_pb_row_26, body.page-id-40 #page-container .et_pb_row.et_pb_row_27 { margin-left: 0 !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; } body.page-id-40 #page-container .et_pb_column_36, body.page-id-40 #page-container .et_pb_column_39, body.page-id-40 #page-container .et_pb_column_42, body.page-id-40 #page-container .et_pb_column_45 { height: auto !important; max-height: none !important; } /* ------------------------------------------------------------------ * Kapcsolat szekció: az oszlopok együtt 127%-ot tettek ki * (60% + 66,7%, flex-wrap: nowrap mellett), ezért a cím belefutott * az űrlapkártyába. Tableten egymás alá kerülnek. * ---------------------------------------------------------------- */ body.page-id-40 #page-container .et_pb_row.et_pb_row_38 { flex-wrap: wrap !important; padding-left: 0 !important; padding-right: 0 !important; } body.page-id-40 #page-container .et_pb_row_38 > .et_pb_column.et_pb_column_63, body.page-id-40 #page-container .et_pb_row_38 > .et_pb_column.et_pb_column_72 { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; border-radius: 35px !important; padding: 50px 40px !important; } body.page-id-40 #page-container .et_pb_row_38 > .et_pb_column.et_pb_column_72 { margin-top: 24px !important; } body.page-id-40 #page-container .et_pb_heading.et_pb_heading_36, body.page-id-40 #page-container .et_pb_heading.et_pb_heading_37 { margin-left: 0 !important; } body.page-id-40 #page-container .et_pb_divider.et_pb_divider_8 { margin-left: 0 !important; } /* IRODA / TELEFON / E-MAIL blokkok tableten is rendezetten */ body.page-id-40 #page-container .et_pb_row.et_pb_row_41, body.page-id-40 #page-container .et_pb_row.et_pb_row_42, body.page-id-40 #page-container .et_pb_row.et_pb_row_43 { flex-wrap: nowrap !important; align-items: flex-start !important; column-gap: 16px !important; --horizontal-gap: 0px; margin-top: 0 !important; margin-bottom: 24px !important; } body.page-id-40 #page-container .et_pb_row_41 > .et_pb_column_66, body.page-id-40 #page-container .et_pb_row_42 > .et_pb_column_68, body.page-id-40 #page-container .et_pb_row_43 > .et_pb_column_70 { flex: 0 0 50px !important; width: 50px !important; max-width: 50px !important; min-width: 50px !important; } body.page-id-40 #page-container .et_pb_row_41 > .et_pb_column_67, body.page-id-40 #page-container .et_pb_row_42 > .et_pb_column_69, body.page-id-40 #page-container .et_pb_row_43 > .et_pb_column_71 { flex: 1 1 auto !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin-top: 0 !important; } body.page-id-40 #page-container .et_pb_icon.et_pb_icon_26, body.page-id-40 #page-container .et_pb_icon.et_pb_icon_27, body.page-id-40 #page-container .et_pb_icon.et_pb_icon_28 { margin-top: 0 !important; margin-left: 0 !important; } body.page-id-40 #page-container .et_pb_heading.et_pb_heading_38, body.page-id-40 #page-container .et_pb_heading.et_pb_heading_39, body.page-id-40 #page-container .et_pb_heading.et_pb_heading_40 { margin-top: 0 !important; margin-left: 0 !important; margin-bottom: 4px !important; } body.page-id-40 #page-container .et_pb_text.et_pb_text_29, body.page-id-40 #page-container .et_pb_text.et_pb_text_30, body.page-id-40 #page-container .et_pb_text.et_pb_text_31, body.page-id-40 #page-container .et_pb_text.et_pb_text_32 { margin-top: 0 !important; margin-left: 0 !important; margin-bottom: 0 !important; } /* Az űrlap küldés gombjának felirata ne törjön két sorba */ body.page-id-40 #page-container .et_pb_section .et_pb_button.et_pb_contact_submit { white-space: nowrap !important; } body.page-id-40 #page-container .et_pb_contact_form_0 .et_pb_contact_field.et_pb_contact_field_0, body.page-id-40 #page-container .et_pb_contact_form_0 .et_pb_contact_field.et_pb_contact_field_1 { flex: 0 0 50% !important; } } /* ========================================================================== KAPCSOLAT OLDAL (/kapcsolat/, page-id-24) -------------------------------------------------------------------------- Ugyanaz az „ELÉRHETŐSÉGEK + űrlap" blokk és GYIK szekció, mint a főoldalon, csak más modulosztály-számokkal. A negatív margók is azonosak (heading -84/-97/-87px, text -35px, sorok -33px), ezért ugyanaz a javítás. Megfeleltetés a főoldalhoz: row_37 -> row_0 column_62 -> column_0 column_71 -> column_9 row_40/41/42 -> row_3/4/5 icon_26/27/28 -> icon_0/1/2 heading_36/37/38 -> heading_2/3/4 text_28..31 -> text_0..3 ========================================================================== */ @media only screen and (max-width: 767px) { /* Egységes szélesség, mint a többi szekcióban */ body.page-id-24 #page-container .et_pb_row.et_pb_row_0, /* elérhetőségek + űrlap */ body.page-id-24 #page-container .et_pb_row.et_pb_row_6, /* GYIK – „INFORMÁCIÓ" felirat */ body.page-id-24 #page-container .et_pb_row.et_pb_row_8 { /* GYIK – kérdések */ width: 92% !important; max-width: 92% !important; } /* A kártyáknak 60px belső margója volt – a tartalomnak alig maradt hely */ body.page-id-24 #page-container .et_pb_column.et_pb_column_0, body.page-id-24 #page-container .et_pb_column.et_pb_column_9 { padding: 40px 24px !important; border-radius: 35px !important; } body.page-id-24 #page-container .et_pb_heading.et_pb_heading_0, body.page-id-24 #page-container .et_pb_heading.et_pb_heading_1 { margin-left: 0 !important; margin-right: 0 !important; } body.page-id-24 #page-container .et_pb_heading.et_pb_heading_1 { margin-top: 0 !important; margin-bottom: 14px !important; } body.page-id-24 #page-container .et_pb_divider.et_pb_divider_0 { margin-left: 0 !important; } /* IRODA / TELEFON / E-MAIL: ikon + felirat + érték egymásra csúszott */ body.page-id-24 #page-container .et_pb_row.et_pb_row_3, body.page-id-24 #page-container .et_pb_row.et_pb_row_4, body.page-id-24 #page-container .et_pb_row.et_pb_row_5 { flex-wrap: nowrap !important; align-items: flex-start !important; column-gap: 14px !important; --horizontal-gap: 0px; margin-top: 0 !important; margin-bottom: 24px !important; } body.page-id-24 #page-container .et_pb_row_3 > .et_pb_column.et_pb_column_3, body.page-id-24 #page-container .et_pb_row_4 > .et_pb_column.et_pb_column_5, body.page-id-24 #page-container .et_pb_row_5 > .et_pb_column.et_pb_column_7 { flex: 0 0 50px !important; width: 50px !important; max-width: 50px !important; min-width: 50px !important; } body.page-id-24 #page-container .et_pb_row_3 > .et_pb_column.et_pb_column_4, body.page-id-24 #page-container .et_pb_row_4 > .et_pb_column.et_pb_column_6, body.page-id-24 #page-container .et_pb_row_5 > .et_pb_column.et_pb_column_8 { flex: 1 1 auto !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin-top: 0 !important; row-gap: 0 !important; } body.page-id-24 #page-container .et_pb_icon.et_pb_icon_0, body.page-id-24 #page-container .et_pb_icon.et_pb_icon_1, body.page-id-24 #page-container .et_pb_icon.et_pb_icon_2 { margin-top: 0 !important; margin-left: 0 !important; } body.page-id-24 #page-container .et_pb_heading.et_pb_heading_2, body.page-id-24 #page-container .et_pb_heading.et_pb_heading_3, body.page-id-24 #page-container .et_pb_heading.et_pb_heading_4 { margin-top: 0 !important; margin-left: 0 !important; margin-bottom: 4px !important; } body.page-id-24 #page-container .et_pb_text.et_pb_text_0, body.page-id-24 #page-container .et_pb_text.et_pb_text_1, body.page-id-24 #page-container .et_pb_text.et_pb_text_2, body.page-id-24 #page-container .et_pb_text.et_pb_text_3 { margin-top: 0 !important; margin-left: 0 !important; margin-bottom: 0 !important; } body.page-id-24 #page-container .et_pb_text.et_pb_text_2 { /* nyitvatartás */ margin-top: 2px !important; } /* Űrlap: a fél szélességű mezők telefonon egész szélesek */ body.page-id-24 #page-container .et_pb_contact_form_0 .et_pb_contact_field.et_pb_contact_field_0, body.page-id-24 #page-container .et_pb_contact_form_0 .et_pb_contact_field.et_pb_contact_field_1 { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; } } @media only screen and (min-width: 768px) and (max-width: 980px) { /* Az oszlopok együtt 127%-ot tettek ki – tableten egymás alá kerülnek */ body.page-id-24 #page-container .et_pb_row.et_pb_row_0 { flex-wrap: wrap !important; padding-left: 0 !important; padding-right: 0 !important; } body.page-id-24 #page-container .et_pb_row_0 > .et_pb_column.et_pb_column_0, body.page-id-24 #page-container .et_pb_row_0 > .et_pb_column.et_pb_column_9 { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; border-radius: 35px !important; padding: 50px 40px !important; } body.page-id-24 #page-container .et_pb_row_0 > .et_pb_column.et_pb_column_9 { margin-top: 24px !important; } body.page-id-24 #page-container .et_pb_heading.et_pb_heading_0, body.page-id-24 #page-container .et_pb_heading.et_pb_heading_1 { margin-left: 0 !important; } body.page-id-24 #page-container .et_pb_divider.et_pb_divider_0 { margin-left: 0 !important; } body.page-id-24 #page-container .et_pb_row.et_pb_row_3, body.page-id-24 #page-container .et_pb_row.et_pb_row_4, body.page-id-24 #page-container .et_pb_row.et_pb_row_5 { flex-wrap: nowrap !important; align-items: flex-start !important; column-gap: 16px !important; --horizontal-gap: 0px; margin-top: 0 !important; margin-bottom: 24px !important; } body.page-id-24 #page-container .et_pb_row_3 > .et_pb_column_3, body.page-id-24 #page-container .et_pb_row_4 > .et_pb_column_5, body.page-id-24 #page-container .et_pb_row_5 > .et_pb_column_7 { flex: 0 0 50px !important; width: 50px !important; max-width: 50px !important; min-width: 50px !important; } body.page-id-24 #page-container .et_pb_row_3 > .et_pb_column_4, body.page-id-24 #page-container .et_pb_row_4 > .et_pb_column_6, body.page-id-24 #page-container .et_pb_row_5 > .et_pb_column_8 { flex: 1 1 auto !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin-top: 0 !important; } body.page-id-24 #page-container .et_pb_icon.et_pb_icon_0, body.page-id-24 #page-container .et_pb_icon.et_pb_icon_1, body.page-id-24 #page-container .et_pb_icon.et_pb_icon_2 { margin-top: 0 !important; margin-left: 0 !important; } body.page-id-24 #page-container .et_pb_heading.et_pb_heading_2, body.page-id-24 #page-container .et_pb_heading.et_pb_heading_3, body.page-id-24 #page-container .et_pb_heading.et_pb_heading_4 { margin-top: 0 !important; margin-left: 0 !important; margin-bottom: 4px !important; } body.page-id-24 #page-container .et_pb_text.et_pb_text_0, body.page-id-24 #page-container .et_pb_text.et_pb_text_1, body.page-id-24 #page-container .et_pb_text.et_pb_text_2, body.page-id-24 #page-container .et_pb_text.et_pb_text_3 { margin-top: 0 !important; margin-left: 0 !important; margin-bottom: 0 !important; } body.page-id-24 #page-container .et_pb_section .et_pb_button.et_pb_contact_submit { white-space: nowrap !important; } } /* ========================================================================== PÁLYÁZAT OLDAL (/palyazat/, page-id-28) -------------------------------------------------------------------------- Egyszerű felépítés (cím + hosszú szöveg + Széchenyi infoblokk kép). Átfedés, levágás, túlcsordulás nincs – egyedül a tartalom szélessége tért el: 80%-on állt a többi oldal 92%-ával szemben. A szélesítéssel a szöveg kevesebb sorba tördel (a szakasz 2452px-ről 2159px-re rövidült), és az infoblokk kép is a tartalom szélességére nő. ========================================================================== */ @media only screen and (max-width: 767px) { body.page-id-28 #page-container .et_pb_row.et_pb_row_0 { width: 92% !important; max-width: 92% !important; } } /* ========================================================================== KARRIER OLDAL (/karrier/, page-id-36) ========================================================================== */ /* --- 1. szekció: „Csatlakozz csapatunkhoz!" hero ------------------------- */ @media only screen and (max-width: 767px) { body.page-id-36 #page-container .et_pb_row.et_pb_row_0 { width: 92% !important; max-width: 92% !important; } /* A „csapatunkhoz!" egy szó, 45px-en 352px-t igényel. 390px-en 7px-szel, 360px-en 35px-szel lógott túl a tartalom szélén (utóbbinál a vége le is vágódott). A vw-alapú méret minden telefonszélességen befér, 430px fölött viszont marad az eredeti 45px. */ body.page-id-36 #page-container .et_pb_heading_0 .et_pb_heading_container h1, body.page-id-36 #page-container .et_pb_heading_0 .et_pb_heading_container h2, body.page-id-36 #page-container .et_pb_heading_1 .et_pb_heading_container h1, body.page-id-36 #page-container .et_pb_heading_1 .et_pb_heading_container h2 { font-size: min(45px, 11.2vw) !important; } /* A JELENTKEZEM gomb burkolóján -83px bal margó volt: a gomb 20px-szel a szöveg elé lógott, a burkoló pedig 45px-szel a képernyőn kívülre. */ body.page-id-36 #page-container .et_pb_button_1_wrapper { margin-left: 0 !important; width: 100% !important; max-width: 100% !important; text-align: left !important; } } @media only screen and (min-width: 768px) and (max-width: 980px) { /* Tableten a „csapatunkhoz!" egyetlen szó 391px-t igényelt a 304px-es oszlopban, ezért belefutott a mellette lévő fotóba. */ body.page-id-36 #page-container .et_pb_heading_0 .et_pb_heading_container h1, body.page-id-36 #page-container .et_pb_heading_0 .et_pb_heading_container h2, body.page-id-36 #page-container .et_pb_heading_1 .et_pb_heading_container h1, body.page-id-36 #page-container .et_pb_heading_1 .et_pb_heading_container h2 { font-size: 34px !important; } body.page-id-36 #page-container .et_pb_button_1_wrapper { margin-left: 0 !important; text-align: left !important; } } @media only screen and (max-width: 980px) { /* A gomb a szöveg vonalába, a felirat ne szoruljon */ body.page-id-36 #page-container .et_pb_section .et_pb_button.et_pb_button_1 { width: auto !important; max-width: 100% !important; white-space: nowrap !important; margin-left: 0 !important; margin-right: auto !important; } } /* --- 2. szekció: állásajánlat kártyák (section_1 / row_2) ---------------- */ @media only screen and (max-width: 767px) { /* A sor 68%-os volt (390px-en 265px), miközben az oldal többi szekciója 92%-on áll. Emiatt a kártyák feleslegesen keskenyek voltak, a címek pedig két-három sorba tördeltek. */ body.page-id-36 #page-container .et_pb_row.et_pb_row_2 { width: 92% !important; max-width: 92% !important; } /* 150px/100px asztali szekció-térköz telefonon: nagy üres sávot hagyott a kártyák előtt és után. */ body.page-id-36 #page-container .et_pb_section.et_pb_section_1 { padding-top: 30px !important; padding-bottom: 20px !important; } /* A kártyák címei és a „Nyitott állás" felirat -3px … +5px bal margóval voltak beállítva, ezért kártyánként pár pixellel elcsúszva jelentek meg. */ body.page-id-36 #page-container .et_pb_section_1 .et_pb_text { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; } /* A gombok burkolóján kártyánként más negatív margó volt (-47/-34/-40px), így a szöveg és a gomb távolsága mindhárom kártyán eltért. */ body.page-id-36 #page-container .et_pb_button_2_wrapper, body.page-id-36 #page-container .et_pb_button_3_wrapper, body.page-id-36 #page-container .et_pb_button_4_wrapper { margin-top: -40px !important; } } @media only screen and (min-width: 768px) and (max-width: 980px) { /* A sor 69%-ról a többi szekcióval azonos 80%-ra */ body.page-id-36 #page-container .et_pb_row.et_pb_row_2 { width: 80% !important; max-width: 80% !important; } body.page-id-36 #page-container .et_pb_section.et_pb_section_1 { padding-top: 50px !important; /* kartyak szekcio */; padding-bottom: 30px !important; } /* A harmadik kártya képére a builderben 41% szélesség volt beállítva tabletre: a kép 112px-es bélyegképként, balra tolva jelent meg, miközben a másik két kártya képe kitöltötte a kártyát. */ body.page-id-36 #page-container .et_pb_section_1 .et_pb_image.et_pb_image_4 { width: 100% !important; } body.page-id-36 #page-container .et_pb_section_1 .et_pb_text { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; } body.page-id-36 #page-container .et_pb_button_2_wrapper, body.page-id-36 #page-container .et_pb_button_3_wrapper, body.page-id-36 #page-container .et_pb_button_4_wrapper { margin-top: -40px !important; } } @media only screen and (max-width: 980px) { /* A középső kártya képe (coworkers-talking) 980x694-es, a másik kettő 980x653-as, ezért 13px-szel magasabbra rajzolódott. Egységes 3:2-es képarány + object-fit: cover, hogy mindhárom kártyában azonos legyen. */ body.page-id-36 #page-container .et_pb_section_1 .et_pb_image_4 img { max-height: none !important; aspect-ratio: 3 / 2 !important; height: auto !important; object-fit: cover !important; } } /* --- 3-5. szekció: a három pozíció leírása (section_2/3/4) --------------- */ @media only screen and (max-width: 767px) { /* Az oldal többi szekciója 92%-on áll, ez a három a Divi 80%-os alapértelmezésén maradt (390px-en 300px). */ body.page-id-36 #page-container .et_pb_row.et_pb_row_5 { width: 92% !important; max-width: 92% !important; } } @media only screen and (min-width: 768px) and (max-width: 980px) { } @media only screen and (max-width: 980px) { /* Tableten a két oszlop egymás mellett volt (a szöveg 300px-es hasábban), telefonon pedig a kép a szöveg alatt. Kérésre mindkét nézetben a kép kerül a tartalom fölé, teljes szélességben. */ body.page-id-36 #page-container .et_pb_row.et_pb_row_5 { flex-wrap: wrap !important; } body.page-id-36 #page-container .et_pb_row_5 > .et_pb_column { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; } /* képoszlop előre, szövegoszlop utána */ body.page-id-36 #page-container .et_pb_section_4 .et_pb_column.et_pb_column_11 { order: 1 !important; align-self: auto !important; } body.page-id-36 #page-container .et_pb_section_4 .et_pb_column.et_pb_column_10 { order: 2 !important; } /* A képek eredetileg fix 500px magasak és object-fit: fill-lel torzítottak voltak (2:3 arányú fotók 0,60-as arányban). Teljes szélességű, 3:2-es fekvő sáv lett belőlük - ugyanaz az arány, mint a fenti álláskártyáknál -, így telefonon sem lesz aránytalanul magas a kép. */ body.page-id-36 #page-container .et_pb_image_7 .et_pb_image_wrap { width: 100% !important; } body.page-id-36 #page-container .et_pb_image_7 img { width: 100% !important; height: auto !important; max-height: none !important; aspect-ratio: 3 / 2 !important; object-fit: cover !important; object-position: center !important; } /* Ezen a fotón felülnézetből dolgozik a rajzoló: középre igazított kivágásnál a feje kimaradt volna. */ body.page-id-36 #page-container .et_pb_image_5 img { object-position: center 18% !important; } } /* --- Karrier: szekció-térközök egységesítése tableten/telefonon ---------- */ @media only screen and (max-width: 980px) { /* Az álláskártyák sorára -80px felső margó volt állítva, ezért a szekció felső térköze elveszett és a kártyák a hero aljához tapadtak. */ body.page-id-36 #page-container .et_pb_row.et_pb_row_2 { margin-top: 0 !important; } /* A kép és a hozzá tartozó szöveg között 70-100px volt a távolság (40px sortávolság + a rejtett kódmodul 30px-e, a középső pozíciónál pedig a címke 60px-es felső margója). Összetartozó elemek, ezért 24px. */ body.page-id-36 #page-container .et_pb_row.et_pb_row_5 { row-gap: 24px !important; } body.page-id-36 #page-container .et_pb_section_4 .et_pb_code { display: none !important; } body.page-id-36 #page-container .et_pb_section_3 .et_pb_button_module_wrapper { margin-top: 0 !important; } } @media only screen and (max-width: 767px) { /* A három pozíció közötti térköz 85 / 70 / 40px volt – egységesen 70px. */ body.page-id-36 #page-container .et_pb_section.et_pb_section_3 { padding-top: 35px !important; padding-bottom: 35px !important; } body.page-id-36 #page-container .et_pb_section.et_pb_section_4 { padding-top: 35px !important; padding-bottom: 50px !important; } } @media only screen and (min-width: 768px) and (max-width: 980px) { body.page-id-36 #page-container .et_pb_section.et_pb_section_3 { padding-top: 45px !important; padding-bottom: 45px !important; } body.page-id-36 #page-container .et_pb_section.et_pb_section_4 { padding-top: 45px !important; padding-bottom: 100px !important; } } @media only screen and (max-width: 980px) { /* A hero JELENTKEZEM gombja asztalin 30%-os szélességű, ezért bőven van hely a felirat mellett. Mobilon/tableten viszont tartalomra méretezzük (width:auto), így csak a 12px-es alap oldalpadding maradt, a felirat szinte a gomb széléhez ért. A :hover is kell, hogy rámutatásra ne ugorjon meg a gomb szélessége. */ body.page-id-36 #page-container .et_pb_section .et_pb_button.et_pb_button_1, body.page-id-36 #page-container .et_pb_section .et_pb_button.et_pb_button_1:hover { padding-left: 32px !important; padding-right: 32px !important; } } /* ========================================================================== FŐOLDAL – gombok belső oldaltérköze + hero badge-ek tableten ========================================================================== */ @media only screen and (max-width: 980px) { /* A gombokra a Divi alap 1em (12px) oldalpaddingja maradt, a nyilas gomboknál pedig 0.7em/2em (8,4px/24px) – a felirat szinte a gomb széléhez ért. A :hover állapotot is rögzítjük, különben rámutatásra megugrik a gomb szélessége. button_1 = hero "Keressen minket", button_4 = "Mi az a Béth-Bau?" */ body.page-id-40 #page-container .et_pb_section .et_pb_button.et_pb_button_1, body.page-id-40 #page-container .et_pb_section .et_pb_button.et_pb_button_1:hover, body.page-id-40 #page-container .et_pb_section .et_pb_button.et_pb_button_4, body.page-id-40 #page-container .et_pb_section .et_pb_button.et_pb_button_4:hover { padding-left: 32px !important; padding-right: 32px !important; } /* button_2 = hero "Szolgáltatásaink", button_3 = KÖZIGAZGATÁS kártya "Ajánlatkérés" – ezeknél jobb oldalon a mindig látszó nyílnak is kell hely, ezért aszimmetrikus a térköz. */ body.page-id-40 #page-container .et_pb_section .et_pb_button.et_pb_button_2, body.page-id-40 #page-container .et_pb_section .et_pb_button.et_pb_button_2:hover, body.page-id-40 #page-container .et_pb_section .et_pb_button.et_pb_button_3, body.page-id-40 #page-container .et_pb_section .et_pb_button.et_pb_button_3:hover { padding-left: 28px !important; padding-right: 44px !important; } } @media only screen and (max-width: 767px) { /* A két hero gomb egy nowrap flex sorban volt: a nagyobb belső térközzel már nem fértek el egymás mellett (390px-en 408px kellett volna), ezért telefonon egymás alá tördelhetők. */ body.page-id-40 #page-container .et_pb_column.et_pb_column_2 { flex-wrap: wrap !important; gap: 12px 30px !important; } } @media only screen and (min-width: 768px) and (max-width: 980px) { /* A forgó BB pecsét tableten is elrejtve (telefonon már az volt). */ body.page-id-40 #page-container .et_pb_section_0 .et_pb_image_2 { display: none !important; } /* A "GYORS, PONTOS HATÁRIDŐK" badge 768px-en 43px-szel rálógott az "ÉPÜLETRE SZABOTT" címre; 80px-szel beljebb, a képre kerül. (768px-en 37px, 820px-en 59px, 980px-en 92px a távolság a címtől.) */ body.page-id-40 #page-container .et_pb_section_0 .et_pb_icon_list_item_1 { transform: translateX(80px) !important; } } @media only screen and (max-width: 980px) { /* A "Mi az a Béth-Bau?" gombra a builderben 50% szélesség van: a nagyobb belső térközzel a felirat tableten két sorba tört (és kilógott az 50px magas gombból). Tartalomra méretezve, egy sorban marad. */ body.page-id-40 #page-container .et_pb_section .et_pb_button.et_pb_button_4 { width: auto !important; max-width: 100% !important; white-space: nowrap !important; } } /* ========================================================================== FŐOLDAL – tablet nézet (768-980px) célzott javítások ========================================================================== */ @media only screen and (min-width: 768px) and (max-width: 980px) { /* 1) "KINEK KELL STATIKUS" – a gomb burkolóján -90px bal margó volt, ezért a gomb 90px-szel a szövegtömb elé csúszott. */ body.page-id-40 #page-container .et_pb_section_6 .et_pb_button_4_wrapper { margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; } /* 2) "AZ EGYÜTTMŰKÖDÉS MENETE" – a képoszlop (12/24) és a kártyaoszlop (16/24) együtt 117%-ot tett ki, amit a builder egy -67px-es jobb margóval tolt össze: a képkollázs jobb széle a kártyák alá futott (820px-en 31px-es átfedés). Valós szélességekkel, átfedés nélkül. */ body.page-id-40 #page-container .et_pb_column.et_pb_column_33 { margin-right: 0 !important; flex: 0 0 34% !important; width: 34% !important; max-width: 34% !important; } body.page-id-40 #page-container .et_pb_column.et_pb_column_34 { flex: 0 0 60% !important; width: 60% !important; max-width: 60% !important; } /* 3) Vélemények – a monogram és a név közti térköz 3-6px volt. */ body.page-id-40 #page-container .et_pb_section_12 .et_pb_heading_28 { margin-left: -31px !important; } body.page-id-40 #page-container .et_pb_section_12 .et_pb_heading_29, body.page-id-40 #page-container .et_pb_section_12 .et_pb_heading_30, body.page-id-40 #page-container .et_pb_section_12 .et_pb_text_24 { margin-left: -29px !important; } /* 4) GYIK – a harmonikán 40px-es oldalmargó volt, ezért keskenyebb volt, mint a szekció többi tartalma. */ body.page-id-40 #page-container .et_pb_section_15 .et_pb_accordion { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* 5) Kapcsolat – az elérhetőség-blokkokban 30px-es modultávolság volt a cím és a konkrét adat között. */ body.page-id-40 #page-container .et_pb_section_16 .et_pb_row_41 > .et_pb_column, body.page-id-40 #page-container .et_pb_section_16 .et_pb_row_42 > .et_pb_column, body.page-id-40 #page-container .et_pb_section_16 .et_pb_row_43 > .et_pb_column { gap: 6px !important; } } /* --- Kapcsolat oldal: elérhetőség-blokkok ------------------------------- */ @media only screen and (min-width: 768px) and (max-width: 980px) { /* Mint a főoldalon: 30px-es modultávolság volt a címke és a konkrét adat között (IRODA→cím, TELEFON→szám, E-MAIL→cím). */ body.page-id-24 #page-container .et_pb_row_3 > .et_pb_column, body.page-id-24 #page-container .et_pb_row_4 > .et_pb_column, body.page-id-24 #page-container .et_pb_row_5 > .et_pb_column { gap: 6px !important; } } @media only screen and (min-width: 981px) { /* Asztali nézetben az E-MAIL blokk elcsúszott a másik kettőhöz képest: a három sor oszlopköze eltérő (20 / 150 / 0px), a szöveget pedig -130px-es margó húzta vissza, így az eltérés a képernyő szélességétől függött (1000px-en -70px, 1920px-en +11px). Fix ikonoszlop-szélesség és nullázott margó: mindhárom blokk minden szélességen egy vonalban. */ body.page-id-24 #page-container .et_pb_row.et_pb_row_3, body.page-id-24 #page-container .et_pb_row.et_pb_row_4, body.page-id-24 #page-container .et_pb_row.et_pb_row_5 { column-gap: 0 !important; } body.page-id-24 #page-container .et_pb_row_3 > .et_pb_column:first-child, body.page-id-24 #page-container .et_pb_row_4 > .et_pb_column:first-child, body.page-id-24 #page-container .et_pb_row_5 > .et_pb_column:first-child { flex: 0 0 80px !important; width: 80px !important; max-width: 80px !important; } body.page-id-24 #page-container .et_pb_row_3 > .et_pb_column:last-child, body.page-id-24 #page-container .et_pb_row_4 > .et_pb_column:last-child, body.page-id-24 #page-container .et_pb_row_5 > .et_pb_column:last-child { flex: 1 1 auto !important; width: auto !important; max-width: none !important; } body.page-id-24 #page-container .et_pb_section_0 .et_pb_heading_2, body.page-id-24 #page-container .et_pb_section_0 .et_pb_heading_3, body.page-id-24 #page-container .et_pb_section_0 .et_pb_heading_4, body.page-id-24 #page-container .et_pb_section_0 .et_pb_text_0, body.page-id-24 #page-container .et_pb_section_0 .et_pb_text_1, body.page-id-24 #page-container .et_pb_section_0 .et_pb_text_2, body.page-id-24 #page-container .et_pb_section_0 .et_pb_text_3 { margin-left: 0 !important; } } /* ========================================================================== ÁRAINK OLDAL (/araink/, page-id-16) -------------------------------------------------------------------------- Ugyanaz az „ELÉRHETŐSÉGEK + űrlap" blokk, mint a főoldalon/kapcsolat oldalon, más modulosztály-számokkal. Megfeleltetés a kapcsolat oldalhoz: row_0 -> row_9 column_0 -> column_14 column_9 -> column_23 row_3/4/5 -> row_12/13/14 column_3/4 -> column_17/18 column_5/6 -> column_19/20 column_7/8 -> column_21/22 heading_0/1 -> heading_6/7 heading_2/3/4 -> heading_8/9/10 text_0/1/2/3 -> text_8/9/10/11 ========================================================================== */ @media only screen and (max-width: 767px) { /* Egységes 92%-os tartalomszélesség (a Divi 80%-os alapja helyett) */ body.page-id-16 #page-container .et_pb_row.et_pb_row_0, body.page-id-16 #page-container .et_pb_row.et_pb_row_1, body.page-id-16 #page-container .et_pb_row.et_pb_row_2, body.page-id-16 #page-container .et_pb_row.et_pb_row_8, body.page-id-16 #page-container .et_pb_row.et_pb_row_9 { width: 92% !important; max-width: 92% !important; } /* --- kapcsolat szekció (mint a főoldalon) --- */ body.page-id-16 #page-container .et_pb_column.et_pb_column_14, body.page-id-16 #page-container .et_pb_column.et_pb_column_23 { padding: 40px 24px !important; border-radius: 35px !important; } body.page-id-16 #page-container .et_pb_heading.et_pb_heading_6, body.page-id-16 #page-container .et_pb_heading.et_pb_heading_7 { margin-left: 0 !important; margin-right: 0 !important; } body.page-id-16 #page-container .et_pb_heading.et_pb_heading_7 { margin-top: 0 !important; margin-bottom: 14px !important; } body.page-id-16 #page-container .et_pb_divider.et_pb_divider_0 { margin-left: 0 !important; } /* IRODA / TELEFON / E-MAIL: a második oszlop összeesett, ezért a „TELEFON" felirat ráfutott az iroda címére. Ikon + tartalom valódi flex sorként. */ body.page-id-16 #page-container .et_pb_row.et_pb_row_12, body.page-id-16 #page-container .et_pb_row.et_pb_row_13, body.page-id-16 #page-container .et_pb_row.et_pb_row_14 { flex-wrap: nowrap !important; align-items: flex-start !important; column-gap: 14px !important; --horizontal-gap: 0px; margin-top: 0 !important; margin-bottom: 24px !important; } body.page-id-16 #page-container .et_pb_row_12 > .et_pb_column.et_pb_column_17, body.page-id-16 #page-container .et_pb_row_13 > .et_pb_column.et_pb_column_19, body.page-id-16 #page-container .et_pb_row_14 > .et_pb_column.et_pb_column_21 { flex: 0 0 50px !important; width: 50px !important; max-width: 50px !important; min-width: 50px !important; } body.page-id-16 #page-container .et_pb_row_12 > .et_pb_column.et_pb_column_18, body.page-id-16 #page-container .et_pb_row_13 > .et_pb_column.et_pb_column_20, body.page-id-16 #page-container .et_pb_row_14 > .et_pb_column.et_pb_column_22 { flex: 1 1 auto !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin-top: 0 !important; row-gap: 0 !important; } body.page-id-16 #page-container .et_pb_icon.et_pb_icon_0, body.page-id-16 #page-container .et_pb_icon.et_pb_icon_1, body.page-id-16 #page-container .et_pb_icon.et_pb_icon_2 { margin-top: 0 !important; margin-left: 0 !important; } body.page-id-16 #page-container .et_pb_heading.et_pb_heading_8, body.page-id-16 #page-container .et_pb_heading.et_pb_heading_9, body.page-id-16 #page-container .et_pb_heading.et_pb_heading_10 { margin-top: 0 !important; margin-left: 0 !important; margin-bottom: 4px !important; } body.page-id-16 #page-container .et_pb_text.et_pb_text_8, body.page-id-16 #page-container .et_pb_text.et_pb_text_9, body.page-id-16 #page-container .et_pb_text.et_pb_text_10, body.page-id-16 #page-container .et_pb_text.et_pb_text_11 { margin-top: 0 !important; margin-left: 0 !important; margin-bottom: 0 !important; } body.page-id-16 #page-container .et_pb_text.et_pb_text_10 { /* nyitvatartás */ margin-top: 2px !important; } /* Űrlap: a fél szélességű mezők telefonon egész szélesek */ body.page-id-16 #page-container .et_pb_contact_field.et_pb_contact_field_0, body.page-id-16 #page-container .et_pb_contact_field.et_pb_contact_field_1 { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; } } @media only screen and (min-width: 768px) and (max-width: 980px) { /* --- díjtáblázat: az ár jobb oldali térköze --- */ /* Az ár modul belső doboza az oszlop 79%-a volt, ezért az ár mellett jobbra 71px maradt, míg balra a leírásnál csak 21px. A Divi 5-ös százalékos szélesség csak container query egységgel oldható fel (width/max-width felülírás – inline !important-tal sem – nem hat). */ body.page-id-16 #page-container .et_pb_row_3 > .et_pb_column.et_pb_column_4, body.page-id-16 #page-container .et_pb_row_4 > .et_pb_column.et_pb_column_6, body.page-id-16 #page-container .et_pb_row_5 > .et_pb_column.et_pb_column_8, body.page-id-16 #page-container .et_pb_row_6 > .et_pb_column.et_pb_column_10, body.page-id-16 #page-container .et_pb_row_7 > .et_pb_column.et_pb_column_12 { container-type: inline-size !important; } body.page-id-16 #page-container .et_pb_row_3 .et_pb_heading_1 .et_pb_heading_container, body.page-id-16 #page-container .et_pb_row_4 .et_pb_heading_2 .et_pb_heading_container, body.page-id-16 #page-container .et_pb_row_5 .et_pb_heading_3 .et_pb_heading_container, body.page-id-16 #page-container .et_pb_row_6 .et_pb_heading_4 .et_pb_heading_container, body.page-id-16 #page-container .et_pb_row_7 .et_pb_heading_5 .et_pb_heading_container, body.page-id-16 #page-container .et_pb_row_5 .et_pb_text_4 .et_pb_text_inner { width: 100cqw !important; max-width: 100cqw !important; } body.page-id-16 #page-container .et_pb_row_3 .et_pb_heading_1, body.page-id-16 #page-container .et_pb_row_3 .et_pb_heading_1 *, body.page-id-16 #page-container .et_pb_row_4 .et_pb_heading_2, body.page-id-16 #page-container .et_pb_row_4 .et_pb_heading_2 *, body.page-id-16 #page-container .et_pb_row_5 .et_pb_heading_3, body.page-id-16 #page-container .et_pb_row_5 .et_pb_heading_3 *, body.page-id-16 #page-container .et_pb_row_5 .et_pb_text_4, body.page-id-16 #page-container .et_pb_row_5 .et_pb_text_4 *, body.page-id-16 #page-container .et_pb_row_6 .et_pb_heading_4, body.page-id-16 #page-container .et_pb_row_6 .et_pb_heading_4 *, body.page-id-16 #page-container .et_pb_row_7 .et_pb_heading_5, body.page-id-16 #page-container .et_pb_row_7 .et_pb_heading_5 * { text-align: right !important; } /* --- kapcsolat szekció --- */ body.page-id-16 #page-container .et_pb_row.et_pb_row_9 { flex-wrap: wrap !important; padding-left: 0 !important; padding-right: 0 !important; } body.page-id-16 #page-container .et_pb_row_9 > .et_pb_column.et_pb_column_14, body.page-id-16 #page-container .et_pb_row_9 > .et_pb_column.et_pb_column_23 { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; border-radius: 35px !important; padding: 50px 40px !important; } body.page-id-16 #page-container .et_pb_row_9 > .et_pb_column.et_pb_column_23 { margin-top: 24px !important; } body.page-id-16 #page-container .et_pb_heading.et_pb_heading_6, body.page-id-16 #page-container .et_pb_heading.et_pb_heading_7, body.page-id-16 #page-container .et_pb_divider.et_pb_divider_0 { margin-left: 0 !important; } body.page-id-16 #page-container .et_pb_row.et_pb_row_12, body.page-id-16 #page-container .et_pb_row.et_pb_row_13, body.page-id-16 #page-container .et_pb_row.et_pb_row_14 { flex-wrap: nowrap !important; align-items: flex-start !important; column-gap: 16px !important; --horizontal-gap: 0px; margin-top: 0 !important; margin-bottom: 24px !important; } body.page-id-16 #page-container .et_pb_row_12 > .et_pb_column_17, body.page-id-16 #page-container .et_pb_row_13 > .et_pb_column_19, body.page-id-16 #page-container .et_pb_row_14 > .et_pb_column_21 { flex: 0 0 50px !important; width: 50px !important; max-width: 50px !important; min-width: 50px !important; } body.page-id-16 #page-container .et_pb_row_12 > .et_pb_column_18, body.page-id-16 #page-container .et_pb_row_13 > .et_pb_column_20, body.page-id-16 #page-container .et_pb_row_14 > .et_pb_column_22 { flex: 1 1 auto !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin-top: 0 !important; row-gap: 6px !important; } body.page-id-16 #page-container .et_pb_icon.et_pb_icon_0, body.page-id-16 #page-container .et_pb_icon.et_pb_icon_1, body.page-id-16 #page-container .et_pb_icon.et_pb_icon_2 { margin-top: 0 !important; margin-left: 0 !important; } body.page-id-16 #page-container .et_pb_heading.et_pb_heading_8, body.page-id-16 #page-container .et_pb_heading.et_pb_heading_9, body.page-id-16 #page-container .et_pb_heading.et_pb_heading_10 { margin-top: 0 !important; margin-left: 0 !important; margin-bottom: 4px !important; } body.page-id-16 #page-container .et_pb_text.et_pb_text_8, body.page-id-16 #page-container .et_pb_text.et_pb_text_9, body.page-id-16 #page-container .et_pb_text.et_pb_text_10, body.page-id-16 #page-container .et_pb_text.et_pb_text_11 { margin-top: 0 !important; margin-left: 0 !important; margin-bottom: 0 !important; } body.page-id-16 #page-container .et_pb_section .et_pb_button.et_pb_contact_submit { white-space: nowrap !important; } body.page-id-16 #page-container .et_pb_contact_field.et_pb_contact_field_0, body.page-id-16 #page-container .et_pb_contact_field.et_pb_contact_field_1 { flex: 0 0 50% !important; } } @media only screen and (max-width: 767px) { /* A díjak keretezett sorai a külső sorba ágyazva vannak, ezért a 92% a szülő 345px-éhez mért: 317px lett, jobb oldalon 43px, bal oldalon 15px külső térközzel. Beágyazott sorként a teljes szélesség a helyes. */ body.page-id-16 #page-container .et_pb_row.et_pb_row_3, body.page-id-16 #page-container .et_pb_row.et_pb_row_4, body.page-id-16 #page-container .et_pb_row.et_pb_row_5, body.page-id-16 #page-container .et_pb_row.et_pb_row_6, body.page-id-16 #page-container .et_pb_row.et_pb_row_7 { width: 100% !important; max-width: 100% !important; } /* Szekciók közötti térköz egységesen 70px (eddig 70 / 51 / 237px volt) */ body.page-id-16 #page-container .et_pb_section.et_pb_section_1 { padding-bottom: 60px !important; } body.page-id-16 #page-container .et_pb_section.et_pb_section_2 { padding-top: 60px !important; padding-bottom: 33px !important; } body.page-id-16 #page-container .et_pb_section.et_pb_section_3 { padding-top: 0 !important; padding-bottom: 50px !important; } } /* ========================================================================== BEMUTATKOZÁS OLDAL (/bemutatkozas/, page-id-20) ========================================================================== */ /* --- 1. szekció: „Mi az a Béth-Bau Kft?" -------------------------------- */ @media only screen and (max-width: 767px) { /* A tartalom a Divi 80%-os alapján állt (390px-en 300px). A belső sor be van ágyazva a külsőbe, ezért annál a 92% már a szülő 92%-ához mérődne (317px) – ott a teljes szélesség a helyes. */ body.page-id-20 #page-container .et_pb_row.et_pb_row_0 { width: 92% !important; max-width: 92% !important; } body.page-id-20 #page-container .et_pb_row.et_pb_row_1 { width: 100% !important; max-width: 100% !important; } /* A kisebb (nyeregtetős) fotó -20px bal margóval a képernyő széléhez ért */ body.page-id-20 #page-container .et_pb_section_0 .et_pb_image_1 { margin-left: 0 !important; } } @media only screen and (max-width: 980px) { /* A „BEMUTATKOZÁS" címke burkolóján 60px felső margó volt, a szekció 50px-es paddingjével együtt 110px üres sáv a fejléc alatt. */ body.page-id-20 #page-container .et_pb_section_0 .et_pb_button_0_wrapper { margin-top: 10px !important; } /* A „DOLGOZZUNK EGYÜTT!" gomb burkolóján -93px bal margó volt: tableten a gomb 12px-szel a képernyő bal széle mögé csúszott. */ body.page-id-20 #page-container .et_pb_section_0 .et_pb_button_1_wrapper { margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; } /* A gomb fix 180px széles volt 30/12px-es paddinggal, ezért telefonon a felirat két sorba tört. Tartalomra méretezve, egységes belső térközzel. */ body.page-id-20 #page-container .et_pb_section .et_pb_button.et_pb_button_1, body.page-id-20 #page-container .et_pb_section .et_pb_button.et_pb_button_1:hover { width: auto !important; max-width: 100% !important; white-space: nowrap !important; padding-left: 32px !important; padding-right: 32px !important; } } /* --- 1. szekció: a kisebb fotó igazítása -------------------------------- */ @media only screen and (max-width: 767px) { /* Ne pontosan a nagy kép vonalában kezdődjön */ body.page-id-20 #page-container .et_pb_section_0 .et_pb_image_1 { margin-left: 24px !important; } } /* --- 2. szekció: „Üzlet- és cégpolitikánk" ------------------------------ */ @media only screen and (max-width: 980px) { /* A sor 469px széles volt egy 375px-es nézetben (a két oszlop együtt 125%), ezért a szekció fele lelógott a képernyőről. Tableten a kép a szöveg mellett, a tartalom a jobb képernyőszélig ért. Kérés szerint: kép felül, tartalom alatta, teljes szélességben. */ body.page-id-20 #page-container .et_pb_row.et_pb_row_2 { width: 100% !important; max-width: 100% !important; flex-wrap: wrap !important; } body.page-id-20 #page-container .et_pb_row_2 > .et_pb_column { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; } /* A kép 670px (mobil) / 639px (tablet) fix magasságú volt, a képoszlop pedig 700px, így üres sáv maradt alatta. Teljes szélességű 16:9 sáv. */ body.page-id-20 #page-container .et_pb_section_1 .et_pb_image_2, body.page-id-20 #page-container .et_pb_section_1 .et_pb_image_2 .et_pb_image_wrap { width: 100% !important; height: auto !important; max-height: none !important; min-height: 0 !important; } body.page-id-20 #page-container .et_pb_section_1 .et_pb_image_2 { margin-bottom: 0 !important; } body.page-id-20 #page-container .et_pb_section_1 .et_pb_image_2 img { width: 100% !important; height: auto !important; max-height: none !important; aspect-ratio: 16 / 9 !important; object-fit: cover !important; } body.page-id-20 #page-container .et_pb_column.et_pb_column_3 { height: auto !important; min-height: 0 !important; } /* A belső sorok szélesebbek voltak a tartalomoszlopnál */ body.page-id-20 #page-container .et_pb_row.et_pb_row_3, body.page-id-20 #page-container .et_pb_row.et_pb_row_4, body.page-id-20 #page-container .et_pb_row.et_pb_row_5 { width: 100% !important; max-width: 100% !important; } /* A harmonika 227px széles volt a 335px-es oszlopban, ezért a cím és a szöveg szinte szavanként tördelt */ body.page-id-20 #page-container .et_pb_section_1 .et_pb_accordion { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* A gomb burkolóján -175px (mobil) / -224px (tablet) bal margó volt: telefonon a gomb 26px-szel a képernyőn kívülre került és a felirat két sorba tört, tableten pedig középre csúszott. */ body.page-id-20 #page-container .et_pb_section_1 .et_pb_button_2_wrapper { margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; text-align: left !important; } body.page-id-20 #page-container .et_pb_section .et_pb_button.et_pb_button_2, body.page-id-20 #page-container .et_pb_section .et_pb_button.et_pb_button_2:hover { width: auto !important; max-width: 100% !important; white-space: nowrap !important; padding-left: 32px !important; padding-right: 32px !important; } } @media only screen and (max-width: 767px) { body.page-id-20 #page-container .et_pb_column.et_pb_column_4 { padding: 24px 4% !important; /* 4% = az 1. szekcio 92%-os soraval azonos oldalso terkoz */ } } @media only screen and (min-width: 768px) and (max-width: 980px) { body.page-id-20 #page-container .et_pb_column.et_pb_column_4 { padding: 32px 40px !important; } } /* --- 2. szekció: finomhangolás ------------------------------------------ */ @media only screen and (max-width: 980px) { /* A belső soroknak 10px jobb oldali paddingjük volt, ezért a kártya jobbról 10px-szel beljebb kezdődött, mint balról. */ body.page-id-20 #page-container .et_pb_row.et_pb_row_3, body.page-id-20 #page-container .et_pb_row.et_pb_row_4, body.page-id-20 #page-container .et_pb_row.et_pb_row_5 { padding-left: 0 !important; padding-right: 0 !important; } /* A harmadik harmonikaelem 20px-es oldalpaddinggal készült (a másik kettő 30px), ezért a lenyitó ikonja kilógott a kártya széléhez. */ body.page-id-20 #page-container .et_pb_section_1 .et_pb_accordion .et_pb_accordion_item { padding-left: 30px !important; padding-right: 30px !important; } /* A következő szekciónak -40px felső margója van, tableten pedig a szekciónak nem volt alsó paddingja: a gomb szinte hozzáért a szürke szekcióhoz. */ body.page-id-20 #page-container .et_pb_section.et_pb_section_1 { padding-bottom: 50px !important; } body.page-id-20 #page-container .et_pb_section.et_pb_section_2 { margin-top: 0 !important; } } @media only screen and (min-width: 768px) and (max-width: 980px) { /* A tartalom oldalsó térköze pontosan annyi, mint az 1. szekcióban (a Divi 80%-os sorával megegyező 10-10%). */ body.page-id-20 #page-container .et_pb_column.et_pb_column_4 { padding-left: 10% !important; padding-right: 10% !important; } } /* --- 3. szekció: „Építészként stabil statikus kapcsolatot keres?" ------- */ @media only screen and (max-width: 767px) { body.page-id-20 #page-container .et_pb_row.et_pb_row_6 { width: 92% !important; max-width: 92% !important; } } @media only screen and (max-width: 980px) { /* A gomb csak 54px (mobil) / 116px (tablet) széles volt, ezért a felirat kilógott a pirulából. */ body.page-id-20 #page-container .et_pb_section .et_pb_button.et_pb_button_3, body.page-id-20 #page-container .et_pb_section .et_pb_button.et_pb_button_3:hover { width: auto !important; max-width: 100% !important; white-space: nowrap !important; padding-left: 32px !important; padding-right: 32px !important; } } /* --- 4-5. szekció: GYIK + kapcsolat (ugyanaz, mint a többi oldalon) ------ Megfeleltetés a kapcsolat oldalhoz (page-id-24): row_0 -> row_8 column_0 -> column_10 column_9 -> column_19 row_3/4/5 -> row_11/12/13 column_3/4 -> column_13/14 column_5/6 -> column_15/16 column_7/8 -> column_17/18 heading_0/1 -> heading_7/8 heading_2/3/4 -> heading_9/10/11 text_0/1/2/3 -> text_3/4/5/6 divider_0 -> divider_1 ------------------------------------------------------------------------ */ @media only screen and (max-width: 767px) { body.page-id-20 #page-container .et_pb_row.et_pb_row_7, /* GYIK */ body.page-id-20 #page-container .et_pb_row.et_pb_row_8 { /* kapcsolat */ width: 92% !important; max-width: 92% !important; } body.page-id-20 #page-container .et_pb_column.et_pb_column_10, body.page-id-20 #page-container .et_pb_column.et_pb_column_19 { padding: 40px 24px !important; border-radius: 35px !important; } body.page-id-20 #page-container .et_pb_heading.et_pb_heading_7, body.page-id-20 #page-container .et_pb_heading.et_pb_heading_8 { margin-left: 0 !important; margin-right: 0 !important; } body.page-id-20 #page-container .et_pb_heading.et_pb_heading_8 { margin-top: 0 !important; margin-bottom: 14px !important; } body.page-id-20 #page-container .et_pb_divider.et_pb_divider_1 { margin-left: 0 !important; } body.page-id-20 #page-container .et_pb_contact_field.et_pb_contact_field_0, body.page-id-20 #page-container .et_pb_contact_field.et_pb_contact_field_1 { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; } } @media only screen and (max-width: 980px) { /* GYIK: a harmonikán 40px oldalmargó volt */ body.page-id-20 #page-container .et_pb_section_3 .et_pb_accordion { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* IRODA / TELEFON / E-MAIL: ikon + felirat + érték egymásra csúszott */ body.page-id-20 #page-container .et_pb_row.et_pb_row_11, body.page-id-20 #page-container .et_pb_row.et_pb_row_12, body.page-id-20 #page-container .et_pb_row.et_pb_row_13 { flex-wrap: nowrap !important; align-items: flex-start !important; column-gap: 14px !important; --horizontal-gap: 0px; margin-top: 0 !important; margin-bottom: 24px !important; } body.page-id-20 #page-container .et_pb_row_11 > .et_pb_column.et_pb_column_13, body.page-id-20 #page-container .et_pb_row_12 > .et_pb_column.et_pb_column_15, body.page-id-20 #page-container .et_pb_row_13 > .et_pb_column.et_pb_column_17 { flex: 0 0 50px !important; width: 50px !important; max-width: 50px !important; min-width: 50px !important; } body.page-id-20 #page-container .et_pb_row_11 > .et_pb_column.et_pb_column_14, body.page-id-20 #page-container .et_pb_row_12 > .et_pb_column.et_pb_column_16, body.page-id-20 #page-container .et_pb_row_13 > .et_pb_column.et_pb_column_18 { flex: 1 1 auto !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin-top: 0 !important; row-gap: 6px !important; } body.page-id-20 #page-container .et_pb_icon.et_pb_icon_0, body.page-id-20 #page-container .et_pb_icon.et_pb_icon_1, body.page-id-20 #page-container .et_pb_icon.et_pb_icon_2 { margin-top: 0 !important; margin-left: 0 !important; } body.page-id-20 #page-container .et_pb_heading.et_pb_heading_9, body.page-id-20 #page-container .et_pb_heading.et_pb_heading_10, body.page-id-20 #page-container .et_pb_heading.et_pb_heading_11 { margin-top: 0 !important; margin-left: 0 !important; margin-bottom: 4px !important; } body.page-id-20 #page-container .et_pb_text.et_pb_text_3, body.page-id-20 #page-container .et_pb_text.et_pb_text_4, body.page-id-20 #page-container .et_pb_text.et_pb_text_5, body.page-id-20 #page-container .et_pb_text.et_pb_text_6 { margin-top: 0 !important; margin-left: 0 !important; margin-bottom: 0 !important; } body.page-id-20 #page-container .et_pb_section .et_pb_button.et_pb_contact_submit { white-space: nowrap !important; } } @media only screen and (min-width: 768px) and (max-width: 980px) { /* A két kártya együtt 127%-ot tett ki – tableten egymás alá */ body.page-id-20 #page-container .et_pb_row.et_pb_row_8 { flex-wrap: wrap !important; padding-left: 0 !important; padding-right: 0 !important; } body.page-id-20 #page-container .et_pb_row_8 > .et_pb_column.et_pb_column_10, body.page-id-20 #page-container .et_pb_row_8 > .et_pb_column.et_pb_column_19 { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; border-radius: 35px !important; padding: 50px 40px !important; } body.page-id-20 #page-container .et_pb_row_8 > .et_pb_column.et_pb_column_19 { margin-top: 24px !important; } body.page-id-20 #page-container .et_pb_heading.et_pb_heading_7, body.page-id-20 #page-container .et_pb_heading.et_pb_heading_8, body.page-id-20 #page-container .et_pb_divider.et_pb_divider_1 { margin-left: 0 !important; } body.page-id-20 #page-container .et_pb_row.et_pb_row_11, body.page-id-20 #page-container .et_pb_row.et_pb_row_12, body.page-id-20 #page-container .et_pb_row.et_pb_row_13 { column-gap: 16px !important; } body.page-id-20 #page-container .et_pb_contact_field.et_pb_contact_field_0, body.page-id-20 #page-container .et_pb_contact_field.et_pb_contact_field_1 { flex: 0 0 50% !important; } } @media only screen and (max-width: 767px) { /* Telefonon a címke és az érték közti térköz ugyanannyi, mint a többi oldalon (4px) – tableten marad a 10px. */ body.page-id-20 #page-container .et_pb_row_11 > .et_pb_column.et_pb_column_14, body.page-id-20 #page-container .et_pb_row_12 > .et_pb_column.et_pb_column_16, body.page-id-20 #page-container .et_pb_row_13 > .et_pb_column.et_pb_column_18 { row-gap: 0 !important; } body.page-id-20 #page-container .et_pb_text.et_pb_text_5 { margin-top: 2px !important; } } /* --- Bemutatkozás: utólagos igazítások ---------------------------------- */ @media only screen and (min-width: 981px) { /* Asztali nézetben a gomb burkolóján -188px bal / 200px jobb margó volt, ezért a gomb a szövegtömbhöz képest a képernyő szélességétől függően csúszott (1000px-en -67px, 1920px-en +36px). */ body.page-id-20 #page-container .et_pb_section_0 .et_pb_button_1_wrapper { margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; } } @media only screen and (max-width: 767px) { /* A GYIK szekció 100/100-as térköze miatt a GYIK és a kapcsolat szekció között 187px volt a távolság (a többi szekció között 100-124px). */ body.page-id-20 #page-container .et_pb_section.et_pb_section_3 { padding-top: 50px !important; padding-bottom: 50px !important; } body.page-id-20 #page-container .et_pb_section.et_pb_section_4 { padding-top: 20px !important; } } @media only screen and (min-width: 981px) { /* A gomb szélessége százalékos volt, a felirat viszont balra igazodott benne: 1440px-en 14/23px, 1920px-en 14/70px lett a bal-jobb térköz. */ body.page-id-20 #page-container .et_pb_section .et_pb_button.et_pb_button_1, body.page-id-20 #page-container .et_pb_section .et_pb_button.et_pb_button_1:hover { width: auto !important; max-width: 100% !important; white-space: nowrap !important; padding-left: 32px !important; padding-right: 32px !important; } /* A harmadik harmonikaelem jobb oldali paddingja 0 volt (a másik kettőé 30px), ezért a lenyitó ikonja kilógott a kártya széléhez. */ body.page-id-20 #page-container .et_pb_section_1 .et_pb_accordion .et_pb_accordion_item { padding-left: 30px !important; padding-right: 30px !important; } } @media only screen and (min-width: 981px) { /* A bal oldali kép 43-340px-szel a szekció alja fölött ért véget (a magassága fix volt, a szekció magasságát a jobb oldali tartalom adta). Most a kép kitölti az oszlopot, így pontosan a következő szekció szürke hátterénél ér véget. */ body.page-id-20 #page-container .et_pb_row_2 > .et_pb_column.et_pb_column_3 { align-self: stretch !important; } body.page-id-20 #page-container .et_pb_section_1 .et_pb_image_2, body.page-id-20 #page-container .et_pb_section_1 .et_pb_image_2 .et_pb_image_wrap { height: 100% !important; max-height: none !important; } body.page-id-20 #page-container .et_pb_section_1 .et_pb_image_2 img { width: 100% !important; height: 100% !important; object-fit: cover !important; } /* A gomb alatti térköz 50-82px között ingadozott (a burkoló sormagassága miatt), a felirat pedig 1280px alatt két sorba tört és kilógott a gombból. Egységesen 70px, egy soros gomb. */ body.page-id-20 #page-container .et_pb_section_1 .et_pb_button_2_wrapper { line-height: 0 !important; margin-bottom: 70px !important; } body.page-id-20 #page-container .et_pb_section .et_pb_button.et_pb_button_2, body.page-id-20 #page-container .et_pb_section .et_pb_button.et_pb_button_2:hover { width: auto !important; max-width: 100% !important; white-space: nowrap !important; padding-left: 32px !important; padding-right: 32px !important; } } /* ========================================================================== KAPCSOLAT-SZEKCIÓ: IKONOSZLOP ASZTALI NÉZETBEN (főoldal, bemutatkozás, áraink) -------------------------------------------------------------------------- Ugyanaz a hiba, amit a /kapcsolat/ oldalon a fenti 981px-es blokk már javít: az IRODA / TELEFON / E-MAIL sorokban az ikon oszlopa 207-224px széles, a szöveget pedig -130px-es margó húzza vissza. Az eredő távolság így a képernyő szélességétől függ (mérve ~188-210px), miközben a /kapcsolat/ oldalon fix 30px. Megoldás – pontosan az, amit a page-id-24 blokk csinál: 80px-es ikonoszlop + nullázott oszlopköz + nullázott bal margó. A sorokat szekcióra szűkítve célozzuk, mert a puszta „ikon az első oszlopban" minta a főoldalon 14 sorra illeszkedne (szolgáltatás-slider, a 4 lépés, vélemények) – azokhoz nem szabad hozzányúlni. ========================================================================== */ @media only screen and (min-width: 981px) { /* --- Főoldal (page-id-40, section_15, row_40/41/42) ------------------ */ body.page-id-40 #page-container .et_pb_section_16 .et_pb_row.et_pb_row_41, body.page-id-40 #page-container .et_pb_section_16 .et_pb_row.et_pb_row_42, body.page-id-40 #page-container .et_pb_section_16 .et_pb_row.et_pb_row_43 { column-gap: 0 !important; } body.page-id-40 #page-container .et_pb_section_16 .et_pb_row_41 > .et_pb_column:first-child, body.page-id-40 #page-container .et_pb_section_16 .et_pb_row_42 > .et_pb_column:first-child, body.page-id-40 #page-container .et_pb_section_16 .et_pb_row_43 > .et_pb_column:first-child { flex: 0 0 80px !important; width: 80px !important; max-width: 80px !important; } body.page-id-40 #page-container .et_pb_section_16 .et_pb_row_41 > .et_pb_column:last-child, body.page-id-40 #page-container .et_pb_section_16 .et_pb_row_42 > .et_pb_column:last-child, body.page-id-40 #page-container .et_pb_section_16 .et_pb_row_43 > .et_pb_column:last-child { flex: 1 1 auto !important; width: auto !important; max-width: none !important; } /* Az ikonokon soronként eltérő negatív bal margó ült (-5 / -7px), ezért a három ikon egymáshoz képest is elcsúszott. Nullázva: a rés pontosan 30px lesz, mint a /kapcsolat/ oldalon. */ body.page-id-40 #page-container .et_pb_section_16 .et_pb_icon.et_pb_icon_26, body.page-id-40 #page-container .et_pb_section_16 .et_pb_icon.et_pb_icon_27, body.page-id-40 #page-container .et_pb_section_16 .et_pb_icon.et_pb_icon_28 { margin-left: 0 !important; } body.page-id-40 #page-container .et_pb_section_16 .et_pb_heading_37, body.page-id-40 #page-container .et_pb_section_16 .et_pb_heading_38, body.page-id-40 #page-container .et_pb_section_16 .et_pb_heading_39, body.page-id-40 #page-container .et_pb_section_16 .et_pb_text_29, body.page-id-40 #page-container .et_pb_section_16 .et_pb_text_30, body.page-id-40 #page-container .et_pb_section_16 .et_pb_text_31, body.page-id-40 #page-container .et_pb_section_16 .et_pb_text_32 { margin-left: 0 !important; } /* --- Bemutatkozás (page-id-20, section_4, row_11/12/13) -------------- */ body.page-id-20 #page-container .et_pb_section_4 .et_pb_row.et_pb_row_11, body.page-id-20 #page-container .et_pb_section_4 .et_pb_row.et_pb_row_12, body.page-id-20 #page-container .et_pb_section_4 .et_pb_row.et_pb_row_13 { column-gap: 0 !important; } body.page-id-20 #page-container .et_pb_section_4 .et_pb_row_11 > .et_pb_column:first-child, body.page-id-20 #page-container .et_pb_section_4 .et_pb_row_12 > .et_pb_column:first-child, body.page-id-20 #page-container .et_pb_section_4 .et_pb_row_13 > .et_pb_column:first-child { flex: 0 0 80px !important; width: 80px !important; max-width: 80px !important; } body.page-id-20 #page-container .et_pb_section_4 .et_pb_row_11 > .et_pb_column:last-child, body.page-id-20 #page-container .et_pb_section_4 .et_pb_row_12 > .et_pb_column:last-child, body.page-id-20 #page-container .et_pb_section_4 .et_pb_row_13 > .et_pb_column:last-child { flex: 1 1 auto !important; width: auto !important; max-width: none !important; } body.page-id-20 #page-container .et_pb_section_4 .et_pb_icon.et_pb_icon_0, body.page-id-20 #page-container .et_pb_section_4 .et_pb_icon.et_pb_icon_1, body.page-id-20 #page-container .et_pb_section_4 .et_pb_icon.et_pb_icon_2 { margin-left: 0 !important; } body.page-id-20 #page-container .et_pb_section_4 .et_pb_heading_8, body.page-id-20 #page-container .et_pb_section_4 .et_pb_heading_9, body.page-id-20 #page-container .et_pb_section_4 .et_pb_heading_10, body.page-id-20 #page-container .et_pb_section_4 .et_pb_text_3, body.page-id-20 #page-container .et_pb_section_4 .et_pb_text_4, body.page-id-20 #page-container .et_pb_section_4 .et_pb_text_5, body.page-id-20 #page-container .et_pb_section_4 .et_pb_text_6 { margin-left: 0 !important; } /* --- Áraink (page-id-16, section_3, row_12/13/14) -------------------- */ body.page-id-16 #page-container .et_pb_section_3 .et_pb_row.et_pb_row_12, body.page-id-16 #page-container .et_pb_section_3 .et_pb_row.et_pb_row_13, body.page-id-16 #page-container .et_pb_section_3 .et_pb_row.et_pb_row_14 { column-gap: 0 !important; } body.page-id-16 #page-container .et_pb_section_3 .et_pb_row_12 > .et_pb_column:first-child, body.page-id-16 #page-container .et_pb_section_3 .et_pb_row_13 > .et_pb_column:first-child, body.page-id-16 #page-container .et_pb_section_3 .et_pb_row_14 > .et_pb_column:first-child { flex: 0 0 80px !important; width: 80px !important; max-width: 80px !important; } body.page-id-16 #page-container .et_pb_section_3 .et_pb_row_12 > .et_pb_column:last-child, body.page-id-16 #page-container .et_pb_section_3 .et_pb_row_13 > .et_pb_column:last-child, body.page-id-16 #page-container .et_pb_section_3 .et_pb_row_14 > .et_pb_column:last-child { flex: 1 1 auto !important; width: auto !important; max-width: none !important; } body.page-id-16 #page-container .et_pb_section_3 .et_pb_icon.et_pb_icon_0, body.page-id-16 #page-container .et_pb_section_3 .et_pb_icon.et_pb_icon_1, body.page-id-16 #page-container .et_pb_section_3 .et_pb_icon.et_pb_icon_2 { margin-left: 0 !important; } body.page-id-16 #page-container .et_pb_section_3 .et_pb_heading_8, body.page-id-16 #page-container .et_pb_section_3 .et_pb_heading_9, body.page-id-16 #page-container .et_pb_section_3 .et_pb_heading_10, body.page-id-16 #page-container .et_pb_section_3 .et_pb_text_8, body.page-id-16 #page-container .et_pb_section_3 .et_pb_text_9, body.page-id-16 #page-container .et_pb_section_3 .et_pb_text_10, body.page-id-16 #page-container .et_pb_section_3 .et_pb_text_11 { margin-left: 0 !important; } } /* --- Karrier: JELENTKEZEM gomb asztali nézetben -------------------------- */ @media only screen and (min-width: 981px) { /* A gomb burkolóján fix -265px bal / 190px jobb margó ült, a gomb pedig középre igazítva, a burkoló 30%-os szélességével. A -265px fix, a középre igazítás viszont a burkoló szélességével arányos, ezért a kettő csak 1920px körül oltotta ki egymást: 1600px-en -29px, 1400px-en -56px, 1200px-en -82px, 981px-en -111px lett a csúszás, ahol a gomb bal széle már -14px-nél, a képernyőn kívül volt. 980px alatt ez a javítás már megvan (lásd fentebb), csak az asztali sáv maradt ki. Ugyanez a minta, mint a bemutatkozás oldalon. */ body.page-id-36 #page-container .et_pb_section_0 .et_pb_button_1_wrapper { margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; } /* A szélesség a burkoló 30%-a volt, ezért a képernyővel együtt zsugorodott (1920px-en 227px, 981px-en 132px). Tartalomhoz igazítva minden szélességen 155px – ugyanaz, mint 980px alatt. */ body.page-id-36 #page-container .et_pb_section .et_pb_button.et_pb_button_1, body.page-id-36 #page-container .et_pb_section .et_pb_button.et_pb_button_1:hover { width: auto !important; max-width: 100% !important; white-space: nowrap !important; margin-left: 0 !important; margin-right: auto !important; padding-left: 32px !important; padding-right: 32px !important; } } /* --- Karrier: hero cím betűmérete asztali nézetben ----------------------- */ @media only screen and (min-width: 981px) { /* A „csapatunkhoz!" egyetlen hosszú szó, a betűmérete viewport-arányos volt, az oszlop viszont gyorsabban szűkül nála, ezért a szó végig túllógott az oszlopán (1920px-en 20px, 1366px-en 53px, 981px-en 101px). ~1366px felett ez még a két oszlop közti hézagba lógott, az alatt viszont a kisebbik hero-kép alá futott: 1280px-en 8px, 1200px-en 22px, 1100px-en 39px, 981px-en 59px átfedéssel (a felkiáltójel eltűnt). Mérve: a szó szélessége = 7,82 x betűméret, az oszlop pedig ~0,378 x viewport -> a még biztonságos méret 4,7vw, 90px-es felső korláttal (1920px-en így gyakorlatilag változatlan marad). 980px alatt már van korlát (min(45px, 11.2vw) / 34px), csak az asztali sáv maradt ki. Mindkét sor együtt méreteződik, hogy a kétsoros cím ne essen szét. */ body.page-id-36 #page-container .et_pb_heading_0 .et_pb_heading_container h1, body.page-id-36 #page-container .et_pb_heading_0 .et_pb_heading_container h2, body.page-id-36 #page-container .et_pb_heading_1 .et_pb_heading_container h1, body.page-id-36 #page-container .et_pb_heading_1 .et_pb_heading_container h2 { font-size: min(90px, 4.7vw) !important; } } /* --- Bemutatkozás: hero képpár és a 2. szekció térközei asztali nézetben - */ @media only screen and (min-width: 981px) { /* HERO – a kisebbik kép fix -230px felső margóval ült a nagy képen. A nagy kép magassága viszont a szélességgel arányosan csökken, ezért az átfedés végig 200px maradt, miközben a kis kép 327px-ről 175px-re zsugorodott: az arány 61%-ról 114%-ra nőtt (1100px alatt a kis kép már teljesen a nagy sávjába esett). A százalékos margó az oszlop szélességéhez igazodik, így az átfedés aránya minden szélességen állandó 50%. A 30px a két kép közti flex row-gap, azt fix értékként kell hozzáadni. Hangolás: nagyobb szám = feljebb csúszik a kis kép (-24% = 50%, -27% ~ 60%, -29% ~ 65% átfedés). */ body.page-id-20 #page-container .et_pb_section_0 .et_pb_image.et_pb_image_1 { margin-top: calc(-24% - 30px) !important; } /* 2. SZEKCIÓ – a sor width:100% / max-width:1440px volt, ezért 1490px alatt (ahol a viewport keskenyebb a max-szélességnél) mindkét oldali térköz nullára esett: a szöveges oszlop a képernyő jobb széléhez tapadt, a kép pedig a bal széléhez. 80% – pontosan annyi, amennyi a hero soránál is van, így a két szekció oldalsó térköze minden szélességen egyezik (1920px-en 225px, 1600px-en 159px, 1280px-en 127px, 981px-en 97px). */ body.page-id-20 #page-container .et_pb_section_1 .et_pb_row.et_pb_row_2 { width: 80% !important; max-width: 1440px !important; margin-left: auto !important; margin-right: auto !important; } /* A két oszlop 57,6% / 36,9% arányban osztozott, tehát a kép nem a szekció fele volt. A hero 47,25% / 47,25% + 5,5% hézag felosztást használ – ugyanez itt is: a kép pontosan a fele, a tartalom a másik fele. */ body.page-id-20 #page-container .et_pb_section_1 .et_pb_row_2 > .et_pb_column { flex: 0 0 47.25% !important; width: 47.25% !important; max-width: 47.25% !important; } /* A „DOLGOZZUNK EGYÜTT!" gomb burkolóján fix -200px bal / 163px jobb margó ült, középre igazítva. A -200px fix, a középre igazítás viszont a burkoló szélességével arányos, ezért csak ~1450px körül esett egy vonalba a fölötte lévő kártyákkal: 1920px-en 64px-szel jobbra, 1280px-en 37px-szel, 981px-en 93px-szel balra állt tőlük. A -10px azért kell, mert a harmonika-kártya maga is -10px bal margóval ül (10px-szel szélesebb az oszlopnál) – enélkül a gomb ennyivel beljebb kerülne nála. */ body.page-id-20 #page-container .et_pb_section_1 .et_pb_button_2_wrapper { margin-left: -10px !important; margin-right: 0 !important; text-align: left !important; } } /* --- Bemutatkozás 2. szekció: a kép oldalsó térköze tableten/mobilon ----- */ /* A képoszlopon padding:0 volt, ezért a kép széltől szélig ért, miközben a szöveges oszlop térköze 10% (tablet) illetve 4% (mobil). Ugyanezt kapja a kép is, hogy a bal-jobb széle a cím és a harmonika-kártyák vonalában legyen. Százalék kell, nem fix px, mert a tartalom térköze is százalékos – így minden köztes szélességen együtt mozognak. */ @media only screen and (min-width: 768px) and (max-width: 980px) { body.page-id-20 #page-container .et_pb_section_1 .et_pb_row_2 > .et_pb_column.et_pb_column_3 { padding-left: 10% !important; padding-right: 10% !important; } } @media only screen and (max-width: 767px) { body.page-id-20 #page-container .et_pb_section_1 .et_pb_row_2 > .et_pb_column.et_pb_column_3 { padding-left: 4% !important; padding-right: 4% !important; } } /* --- Bemutatkozás: hero nagy kép + szekció-térköz tableten/mobilon ------- */ @media only screen and (max-width: 767px) { /* A hero nagy képének moduljára a builder padding-left:135px-et tett, a width:137% pedig ennek a kompenzációja volt. Mobilon a kettő együtt jobbra tolta és túlméretezte a képet, a többlet pedig balra lógott ki a képernyőről: 767px-en 91px, 700px-en 71px, 600px-en 41px, 500px-en 11px. 430px alatt már nem lógott ki, de jobbra volt húzva (390px-en 22px bal / 15px jobb térköz). Így a kép pontosan az oszlopot tölti ki, szimmetrikusan. */ body.page-id-20 #page-container .et_pb_section_0 .et_pb_image.et_pb_image_0 { width: 100% !important; padding-left: 0 !important; } /* Az „Építészként stabil statikus…” szekció fölötti rés 224px volt, miközben a lap többi szekcióköze 100-140px. Összetevői: 100px sor-margó + 50px szekció alsó + 50px szekció felső padding. A sor-margót elhagyva a rés 124px – beáll a többi közé. */ body.page-id-20 #page-container .et_pb_section_1 .et_pb_row.et_pb_row_2 { margin-bottom: 0 !important; } } @media only screen and (min-width: 768px) and (max-width: 980px) { /* Tableten ugyanez a rés 182px volt (a 0->1 szekcióköz 99px). */ body.page-id-20 #page-container .et_pb_section_1 .et_pb_row.et_pb_row_2 { margin-bottom: 40px !important; } } /* ========================================================================== ÁRAJÁNLAT ÖSSZESÍTŐ OLDAL (/arajanlat-osszesito/, page-id-26) -------------------------------------------------------------------------- Felépítés: section_0 üres térköz-szekció section_1 row_1 – „KERESSEN BENNÜNKET!” cím (heading_0) + bevezető section_2 row_2 – három ajánlatkérő kártya (column_2/3/4), mindegyikben heading + szöveg + „ÉRDEKEL” gomb (button_0/1/2) section_3 row_3/row_4 – „INFORMÁCIÓ” elválasztó felirat section_4 row_5 – GYIK: heading_5 + text_5 + accordion_0 A GYIK szekció megfeleltetése a kapcsolat oldalhoz (page-id-24): row_3 -> row_6 row_5 -> row_8 column_7 -> column_12 heading_4 -> heading_6 heading_5 -> heading_7 text_5 -> text_4 accordion_0 -> accordion_0 ========================================================================== */ /* --- Tartalomszélesség: egy vonalban a fejléccel és a lábléccel ---------- A lap minden sora 80%-os (telefonon a fejléc/lábléc 92%-ra van állítva), egyedül a kártyasor (row_2) volt 100% széles, 20px belső térközzel: 820px-en 0..805 helyett 81..725 a helyes, 390px-en 0..375 helyett 15..360. A többi sor telefonon 80%-on maradt (38..338), ezért az sem futott egy vonalba a fejléccel. Ellenőrizve 360 / 390 / 480 / 600 / 700 / 767 / 768 / 800 / 900 / 980px-en: mind a nyolc tartalmi sor széle pontosan megegyezik a fejléc és a lábléc sorának szélével. ------------------------------------------------------------------------ */ @media only screen and (max-width: 767px) { body.page-id-26 #page-container .et_pb_row.et_pb_row_0, body.page-id-26 #page-container .et_pb_row.et_pb_row_1, /* cím + bevezető */ body.page-id-26 #page-container .et_pb_row.et_pb_row_2, /* kártyák */ body.page-id-26 #page-container .et_pb_row.et_pb_row_3, /* „INFORMÁCIÓ” */ body.page-id-26 #page-container .et_pb_row.et_pb_row_5 { /* GYIK */ width: 92% !important; max-width: 92% !important; } body.page-id-26 #page-container .et_pb_row.et_pb_row_2 { padding-left: 0 !important; padding-right: 0 !important; } } @media only screen and (min-width: 768px) and (max-width: 980px) { /* 1) A kártyasor a fejléc/lábléc vonalára, és a három kártya egymás alá. Egymás mellett 768px-en csak 189px széles tartalom jutott kártyánként: a címek két sorba törtek, a szöveg 8 sorba, a három kártya pedig eltérő magas lett (486 / 408 / 411px), így se a tetejük, se az aljuk nem volt egy vonalban. */ body.page-id-26 #page-container .et_pb_row.et_pb_row_2 { width: 80% !important; max-width: 80% !important; padding-left: 0 !important; padding-right: 0 !important; flex-wrap: wrap !important; } body.page-id-26 #page-container .et_pb_row_2 > .et_pb_column { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; } /* 2) GYIK: a harmonikán 40px-es oldalmargó volt, ezért keskenyebb volt, mint a fölötte lévő cím és bevezető (115-678 helyett 75-678). A kapcsolat oldalon ugyanez a harmonika margó nélkül áll. */ body.page-id-26 #page-container .et_pb_section_4 .et_pb_accordion { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* 3) Az „ÉRDEKEL” gombok burkolóján -25px bal és 105px jobb margó volt (asztali nézetben -45/130px). Ez széles képernyőn pont a kártya szövegéhez igazította a gombot, tableten viszont a burkoló 25px-szel kilógott a kártyából, a gomb pedig kártyánként máshova esett (a felső margó is -22 / -7 / +26px volt). Margó nélkül a gomb a kártya szövegével kerül egy vonalba. */ body.page-id-26 #page-container .et_pb_button_0_wrapper, body.page-id-26 #page-container .et_pb_button_1_wrapper, body.page-id-26 #page-container .et_pb_button_2_wrapper { margin: 0 !important; padding-top: 10px !important; text-align: left !important; } /* A gomb szélessége a burkoló 70%-a volt. A teljes szélességű kártyában ez 420px-es gombot adna, ezért a felirathoz igazodó pirula lesz – ugyanaz a méret, mint telefonon (121px). */ body.page-id-26 #page-container .et_pb_section .et_pb_button.et_pb_button_0, body.page-id-26 #page-container .et_pb_section .et_pb_button.et_pb_button_1, body.page-id-26 #page-container .et_pb_section .et_pb_button.et_pb_button_2 { width: auto !important; max-width: 100% !important; margin-left: 0 !important; margin-right: auto !important; padding-left: 32px !important; padding-right: 32px !important; } } /* --- Asztali nézet: kártyamagasság és a gombok pozíciója ------------------ Ugyanaz a hiba, mint tableten, csak asztali nézetben is végig jelen volt: a) A sor align-items: center volt, a három kártya szövege viszont különböző hosszú, ezért a kártyák eltérő magasak lettek és el voltak csúsztatva egymáshoz képest (1024px-en 534 / 444 / 446px magas, a tetejük 380 / 425 / 424px-en). b) A gombburkoló -45px bal / 130px jobb margója csak ~1900px-en adta ki pontosan a kártya szövegének vonalát. Ahogy szűkül a képernyő, a gomb egyre balrább csúszik a címhez képest (1440px: -15px, 1200px: -24px, 1024px: -30px), és 1250px alatt már ki is lóg a kártyából (1200px: 2px, 1100px: 6px, 1024px: 8px) – ott a kártya overflow: hidden-je vágja le. c) A gomb szélessége a burkoló 70%-a volt, ami a burkolóval együtt zsugorodott: 1920px-en 211px, 1024px-en már csak 70px. Megoldás ugyanaz, mint a lap többi gombjánál (lásd a bemutatkozás oldal 981px-es blokkját): felirathoz igazodó pirula, a kártya szövegével egy vonalban, a margin-top: auto pedig mindhárom gombot a kártya aljára, egy sorba teszi. Ellenőrizve 981 / 1024 / 1200 / 1366 / 1600 / 1850px-en: a három kártya magassága és teteje azonos, a gombok egy vonalban, egyforma szélesek (122px), és mindig 22px-re a kártya belső szélétől. ------------------------------------------------------------------------ */ @media only screen and (min-width: 981px) { body.page-id-26 #page-container .et_pb_row.et_pb_row_2 { align-items: stretch !important; } body.page-id-26 #page-container .et_pb_button_0_wrapper, body.page-id-26 #page-container .et_pb_button_1_wrapper, body.page-id-26 #page-container .et_pb_button_2_wrapper { margin: auto 0 0 0 !important; padding-top: 20px !important; text-align: left !important; } body.page-id-26 #page-container .et_pb_section .et_pb_button.et_pb_button_0, body.page-id-26 #page-container .et_pb_section .et_pb_button.et_pb_button_1, body.page-id-26 #page-container .et_pb_section .et_pb_button.et_pb_button_2, body.page-id-26 #page-container .et_pb_section .et_pb_button.et_pb_button_0:hover, body.page-id-26 #page-container .et_pb_section .et_pb_button.et_pb_button_1:hover, body.page-id-26 #page-container .et_pb_section .et_pb_button.et_pb_button_2:hover { width: auto !important; max-width: 100% !important; white-space: nowrap !important; margin-left: 0 !important; margin-right: auto !important; padding-left: 32px !important; padding-right: 32px !important; } } /* ========================================================================== BETHBAU-URLAP-HIBAUZENETEK – kapcsolati űrlap olvashatóság ========================================================================== Miért kell: a Divi a validációs üzeneteket a `.et-pb-contact-message` dobozba írja, ennek viszont nincs saját színe – az örökölt sötétszürke testszín marad rajta. Ez az űrlap sötétkék szekción ül (a mezők szövege rgba(255,255,255,0.3)), így a hibaüzenet gyakorlatilag olvashatatlan. A Divi saját szabálya a hibás jelölőnégyzet-feliratokra `color: red`-et tesz – a sötét háttéren ez is gyenge kontrasztú, ezért világosabb pirosra cseréljük. Hatókör: a négy oldal, ahol ez a sötét űrlap szerepel (16 Áraink, 20 Bemutatkozás, 24 Kapcsolat, 40 Főoldal). Szándékosan NEM globális: világos hátterű űrlapon a világos szöveg lenne olvashatatlan. Nincs töréspontba zárva – a hibaüzenet minden nézetben olvasható kell hogy legyen. ========================================================================== */ body.page-id-16 #page-container .et-pb-contact-message, body.page-id-20 #page-container .et-pb-contact-message, body.page-id-24 #page-container .et-pb-contact-message, body.page-id-40 #page-container .et-pb-contact-message, body.page-id-16 #page-container .et-pb-contact-message p, body.page-id-20 #page-container .et-pb-contact-message p, body.page-id-24 #page-container .et-pb-contact-message p, body.page-id-40 #page-container .et-pb-contact-message p { color: #ffffff !important; } /* A konkrét hibás mezők felsorolása + a szerveroldali hibaszöveg. */ body.page-id-16 #page-container .et-pb-contact-message ul li, body.page-id-20 #page-container .et-pb-contact-message ul li, body.page-id-24 #page-container .et-pb-contact-message ul li, body.page-id-40 #page-container .et-pb-contact-message ul li, body.page-id-16 #page-container .et_pb_contact_error_text, body.page-id-20 #page-container .et_pb_contact_error_text, body.page-id-24 #page-container .et_pb_contact_error_text, body.page-id-40 #page-container .et_pb_contact_error_text { color: #ffb4ae !important; font-weight: 600 !important; } /* Hibás mező kerete: a Divi tiszta `red`-je helyett világosabb piros. */ body.page-id-16 #page-container .et_pb_contact .et_pb_contact_field .et_contact_error, body.page-id-20 #page-container .et_pb_contact .et_pb_contact_field .et_contact_error, body.page-id-24 #page-container .et_pb_contact .et_pb_contact_field .et_contact_error, body.page-id-40 #page-container .et_pb_contact .et_pb_contact_field .et_contact_error { border-color: #ff6b6b !important; } /* Hibás jelölőnégyzet/rádió felirata és keretezése. */ body.page-id-16 #page-container .et_pb_contact .et_pb_contact_form .et_pb_contact_field.et_contact_error input[type="checkbox"] + label, body.page-id-20 #page-container .et_pb_contact .et_pb_contact_form .et_pb_contact_field.et_contact_error input[type="checkbox"] + label, body.page-id-24 #page-container .et_pb_contact .et_pb_contact_form .et_pb_contact_field.et_contact_error input[type="checkbox"] + label, body.page-id-40 #page-container .et_pb_contact .et_pb_contact_form .et_pb_contact_field.et_contact_error input[type="checkbox"] + label, body.page-id-16 #page-container .et_pb_contact .et_pb_contact_form .et_pb_contact_field.et_contact_error input[type="radio"] + label, body.page-id-20 #page-container .et_pb_contact .et_pb_contact_form .et_pb_contact_field.et_contact_error input[type="radio"] + label, body.page-id-24 #page-container .et_pb_contact .et_pb_contact_form .et_pb_contact_field.et_contact_error input[type="radio"] + label, body.page-id-40 #page-container .et_pb_contact .et_pb_contact_form .et_pb_contact_field.et_contact_error input[type="radio"] + label { color: #ffb4ae !important; } body.page-id-16 #page-container .et_pb_contact .et_pb_contact_form .et_pb_contact_field.et_contact_error input[type="checkbox"] + label i, body.page-id-20 #page-container .et_pb_contact .et_pb_contact_form .et_pb_contact_field.et_contact_error input[type="checkbox"] + label i, body.page-id-24 #page-container .et_pb_contact .et_pb_contact_form .et_pb_contact_field.et_contact_error input[type="checkbox"] + label i, body.page-id-40 #page-container .et_pb_contact .et_pb_contact_form .et_pb_contact_field.et_contact_error input[type="checkbox"] + label i { border-color: #ff6b6b !important; } /* -------------------------------------------------------------------------- Kattintható kapcsolati adatok (tel: / mailto:) A Bemutatkozás oldal ajánlatkérő blokkjában a telefonszám és az e-mail cím linkelve van. A link ne kapjon eltérő színt – a körülötte lévő szöveg színét viszi tovább, csak hoverre jelezzük alahúzással. -------------------------------------------------------------------------- */ #page-container a.bethbau-contact-link, #page-container a.bethbau-contact-link:visited { color: inherit !important; text-decoration: none !important; } #page-container a.bethbau-contact-link:hover, #page-container a.bethbau-contact-link:focus-visible { text-decoration: underline !important; } /* ========================================================================== BETHBAU-URLAP-SELECT – „Kérjük, válasszon szolgáltatást" legördülő ========================================================================== Miért kell: a Divi a mező betűszínét `rgba(255,255,255,0.3)`-ra állítja, mert a mező sötét oszlopon ül. Az `