.elementor-kit-11{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-cd990ad:#063864;--e-global-color-ee7490a:#009EE3;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;color:#52575D;font-family:"Open Sans", Sans-serif;font-size:17px;font-weight:400;line-height:1.7em;}.elementor-kit-11 button,.elementor-kit-11 input[type="button"],.elementor-kit-11 input[type="submit"],.elementor-kit-11 .elementor-button{background-color:#0028FF;font-family:"Montserrat", Sans-serif;font-size:18px;font-weight:600;line-height:28px;color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#0028FF;border-radius:50px 50px 50px 50px;padding:15px 60px 15px 60px;}.elementor-kit-11 button:hover,.elementor-kit-11 button:focus,.elementor-kit-11 input[type="button"]:hover,.elementor-kit-11 input[type="button"]:focus,.elementor-kit-11 input[type="submit"]:hover,.elementor-kit-11 input[type="submit"]:focus,.elementor-kit-11 .elementor-button:hover,.elementor-kit-11 .elementor-button:focus{background-color:#062D92;color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#062D92;border-radius:0px 20px 0px 20px;}.elementor-kit-11 e-page-transition{background-color:#FFBC7D;}.elementor-kit-11 h1{color:var( --e-global-color-ee7490a );font-family:"Montserrat", Sans-serif;font-size:70px;font-weight:800;line-height:1.2em;}.elementor-kit-11 h2{color:#1B262C;font-family:"Montserrat", Sans-serif;font-size:60px;font-weight:800;line-height:1.2em;}.elementor-kit-11 h3{color:#1B262C;font-family:"Montserrat", Sans-serif;font-size:40px;font-weight:800;line-height:1.2em;}.elementor-kit-11 h4{color:#1B262C;font-family:"Montserrat", Sans-serif;font-size:30px;font-weight:700;line-height:1.4em;}.elementor-kit-11 h5{color:#1B262C;font-family:"Montserrat", Sans-serif;font-size:24px;font-weight:700;line-height:1.25em;}.elementor-kit-11 h6{color:#1B262C;font-family:"Montserrat", Sans-serif;font-size:18px;font-weight:600;line-height:1.5em;}.elementor-kit-11 input:not([type="button"]):not([type="submit"]),.elementor-kit-11 textarea,.elementor-kit-11 .elementor-field-textual{font-family:"Open Sans", Sans-serif;font-size:17px;font-weight:400;font-style:italic;line-height:24px;color:#52575D;background-color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#BECBFF;border-radius:20px 20px 20px 20px;padding:10px 20px 10px 20px;}.elementor-kit-11 input:focus:not([type="button"]):not([type="submit"]),.elementor-kit-11 textarea:focus,.elementor-kit-11 .elementor-field-textual:focus{color:#52575D;background-color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#0962EA;border-radius:20px 20px 20px 20px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-11{font-size:14px;line-height:1.6em;}.elementor-kit-11 h1{font-size:40px;line-height:1.3em;}.elementor-kit-11 h2{font-size:40px;line-height:1.3em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* ============================================================================ Fejes Dental – reszponzív javítások Készült: 2026-08-31 · WordPress 7.1 · Elementor 4.2.3 Elementor breakpointok: mobile 767px · tablet 1024px Tesztelve valós viewport-szélességeken: 320 / 360 / 390 / 430 / 600 / 767 / 768 / 900 / 1024 / 1085 / 1180 / 1366 / 1920 / 2560 px Minden szabály widget-ID-re szűkített → nem szivárog más oldalakra. ============================================================================ */ /* --------------------------------------------------------------------------- 1) MOBIL FEJLÉC (≤767px) — logó vissza, a hamburger mellé Hiba volt: a logó konténere (.elementor-element-d5e0cd) elementor-hidden-mobile miatt display:none, így mobilon nem volt sem márkajelzés, sem kattintható "home" link. A menü+CTA sor (43c55dfd) negatív felső margóval, 2 sorban ült. Megoldás: a fejléc belső kolumnája egysoros tördelő flexbox lesz, a menü-sort display:contents-szel "feloldjuk", így a logó és a hamburger egy sorba kerül, a CTA gomb pedig alá, teljes szélességben. Eredmény: fejlécmagasság 183px → 215px (a logóval), 0 túlcsordulás. --------------------------------------------------------------------------- */ @media (max-width: 767px) { header .elementor-element-4e5143d7 { flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; row-gap: 10px !important; padding: 10px 20px !important; } /* felső info-sor: csak a logót tartja, tartalom szerinti szélességgel */ header .elementor-element-60e22778 { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; } /* a logó újra látszik – 2 osztály + !important veri az Elementor .elementor-hidden-mobile{display:none!important} szabályát */ header .elementor-element-d5e0cd.elementor-hidden-mobile { display: flex !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } header .elementor-element-1466ecf3 { width: auto !important; } header .elementor-element-1466ecf3 img { max-width: 112px !important; height: auto !important; display: block !important; } /* a mobilon rejtett info-boxok üres konténerei ne foglaljanak szélességet */ header .elementor-element-535e8e7b, header .elementor-element-2c06ed7a, header .elementor-element-750ed367 { display: none !important; } /* a menü+CTA sor feloldása: gyerekei a fejléc-flexbe kerülnek */ header .elementor-element-43c55dfd { display: contents !important; } /* hamburger: a maradék helyet kapja, jobbra igazítva */ header .elementor-element-27be6caa { flex: 1 1 0% !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; align-items: flex-end !important; } header .elementor-element-27be6caa > .elementor-element { width: 100% !important; max-width: 100% !important; } header .elementor-element-70dc4f48 { width: 100% !important; justify-content: flex-end !important; } header .elementor-element-70dc4f48 .elementor-menu-toggle { margin: 0 0 0 auto !important; flex: 0 0 auto !important; } /* Időpontfoglalás gomb: külön sor, teljes szélesség */ header .elementor-element-bfa21dc { flex: 0 0 100% !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } /* LÁBLÉC CTA CÍM TÖRDELÉSE Hiba volt: a "fejesdentalkecel.hu" 30px-en tördelhetetlen szóként 314px-t igényelt egy 263px-es konténerben → 360px-en 10px, 320px-en ~50px túlcsordulás; a body{overflow-x:clip} miatt levágott szöveg lett belőle. */ .elementor-element-3b69af9 .elementor-heading-title, .elementor-element-3b69af9 .elementor-heading-title a { font-size: clamp(19px, 6.4vw, 30px) !important; line-height: 1.25 !important; overflow-wrap: anywhere; word-break: break-word; } } /* --------------------------------------------------------------------------- 2) TABLET FEJLÉC (768–1085px) — logó / óra-ikon ütközés Hiba volt: a logó hasábja fix 20% (=93px @768px), a logó viszont max-width:135px → 52px-t kilógott, és 768–890px között 18px-t rácsúszott a "Rendelési idő" óra-ikonjára. Megoldás: fix 132px-es, nem zsugorodó logó-hasáb + 112px-es logó. A fejléc magassága NEM változik (328px @768, 311px @900–1024). --------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1085px) { header .elementor-element-d5e0cd { width: auto !important; flex: 0 0 132px !important; } header .elementor-element-1466ecf3 img { max-width: 112px !important; height: auto !important; } header .elementor-element-60e22778 { align-items: center !important; } } /* --------------------------------------------------------------------------- 3) "MIBEN TUDUNK SEGÍTENI?" SZEKCIÓ TABLETEN (768–1024px) Hiba volt: a konténer tableten is flex-wrap:nowrap maradt, ezért 3 hasáb × 218px jött ki – a 40-50px-es szekciócím 3 sorba, a 24px-es kártyacímek 4 sorba tördeltek, a lépcsőzetes kártyák összecsúsztak. Megoldás: tördelés + 2 hasáb → 335px-es kártyák 768px-en. (1 hasábhoz cseréld a calc(50% - 12px) értékeket 100%-ra.) --------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1024px) { .elementor-element-114d2446, .elementor-element-114d2446 > .e-con-inner { flex-wrap: wrap !important; align-items: flex-start !important; } .elementor-element-114d2446 > .e-con, .elementor-element-114d2446 > .e-con-inner > .e-con { flex: 1 1 calc(50% - 12px) !important; width: calc(50% - 12px) !important; max-width: calc(50% - 12px) !important; } } /* --------------------------------------------------------------------------- 4) TAP TARGET MÉRETEK (≤1024px) Hiba volt: a lábléc kapcsolati linkjei (Cím, Telefonszám, Rendelési idő, Parkolás, Facebook, E-mail) 22px magasak – a WCAG 2.5.8 minimum 24px alatt, és jóval a 44px-es mobil ajánlás alatt. --------------------------------------------------------------------------- */ @media (max-width: 1024px) { footer .elementor-widget-icon-box .elementor-icon-box-title a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 2px 6px; } /* fejléc Facebook link: 22px → 24px, a fejléc magassága nem változik */ header .elementor-widget-icon-box .elementor-icon-box-title a { display: inline-block; min-height: 24px; line-height: 24px; padding: 0 4px; } } /* --------------------------------------------------------------------------- 5) "ÍGY ZAJLIK NÁLUNK A KEZELÉS" SZEKCIÓ MOBILON (≤767px) Hiba volt: - a szekció belső margója aszimmetrikus (30px 0 30px 15px) → balra húzott, - az 1. lépés szám-badge-e teljes szélességű pill (246px), a 2. és 3. viszont 114px-es kör, ráadásul balra igazítva → nem egységes, - a lépések között csak 10px gap volt. Megoldás: szimmetrikus belső margó, egy hasáb, mindhárom badge egyforma (114×94px) és középre igazítva, a lépések között 36px térköz. --------------------------------------------------------------------------- */ @media (max-width: 767px) { .elementor-element-64b34953 { padding: 40px 20px !important; align-items: center !important; } .elementor-element-7bbccfc3 { flex-direction: column !important; flex-wrap: nowrap !important; align-items: center !important; gap: 36px !important; width: 100% !important; padding: 0 !important; } /* a három lépés-konténer: teljes szélesség, középre igazított tartalom */ .elementor-element-a797692, .elementor-element-bcc9f06, .elementor-element-99f9b31 { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; align-items: center !important; text-align: center !important; } /* egységes, középre igazított szám-badge (1 / 2 / 3) */ .elementor-element-f657f32, .elementor-element-76cd5936, .elementor-element-7f6488cf { width: 114px !important; max-width: 114px !important; flex: 0 0 auto !important; padding: 20px 0 !important; margin: 0 auto 18px !important; align-self: center !important; } } /* --------------------------------------------------------------------------- 6) HERO KÁRTYÁK ("Kezeléseink" / "Rendelési idő") – összeszorulás ellen Hiba volt: a két kártya sora (1f0d4bd1) nem tördelt, ezért amint a szöveges hasáb leszűkült, a kártyák beszorultak: 1025–1179px viewport → 191–224px kártyaszélesség (60px belső margóval csak ~131px tartalom) → a "Kezeléseink" cím levágódott, a leírás egy-két szavas sorokba tördelt. 768–1024px (valódi tablet) és ≤767px (mobil) rendben volt. Megoldás: a sor tördelhet, a kártyák flex-basis-a 220px – így amint két kártya nem fér ki olvashatóan, egymás alá kerülnek és kitöltik a hasábot. Eredmény: 1025–1179px → 410–440px kártyák egymás alatt; 768–1024px → 320–448px egymás mellett (változatlan); >=1180px → 224px egymás mellett (desktop dizájn változatlan); <=767px → teljes szélességű kártyák (változatlan). --------------------------------------------------------------------------- */ @media (min-width: 767px) { .elementor-element-1f0d4bd1 { flex-wrap: wrap !important; } .elementor-element-2a16a33e, .elementor-element-ae221df { flex: 1 1 220px !important; min-width: 0 !important; } } /* 767–768px törtpixeles rés: itt sem a mobil (max-width:767px), sem a min-width:768px szabályok nem érvényesülnek, ezért a hero a desktop 2 hasábos elrendezésre esik vissza (346px-es szövegoszlop, 128px-es kártyák). Ez az a nézet, amit az Elementor tablet-előnézete (767.99px) mutat. Itt kézzel visszaadjuk a tablet elrendezést. Megjegyzés: a rés a lap többi szekcióját is érinti – ennek rendszerszintű megoldása a mobil breakpoint 767 -> 768 átállítása (Webhelybeállítások -> Elrendezés -> Breakpointok). */ @media (min-width: 767px) and (max-width: 768px) { .elementor-element-2ea70a00 { width: 100% !important; } .elementor-element-50fa403f { display: none !important; } } /* ============================================================================ SZOLGÁLTATÁSOK OLDAL (/szolgaltatasok/) Mérve: 320 / 360 / 390 / 430 / 600 / 767 / 770 / 800 / 900 / 1024 / 1025 / 1085 / 1152 / 1194 / 1280 / 1440 / 1920 px Megjegyzés: ez az oldal MÁS fejléc-sablont használ, mint a főoldal (saját CTA gomb widget), a mobil logó itt eleve látszik. ============================================================================ */ /* --------------------------------------------------------------------------- 7) "Szolgáltatásaink" H1 kis mobilon (<=389px) Hiba volt: a 40px-es, tördelhetetlen "Szolgáltatásaink" 337px-t igényel, a doboz viszont csak 285px -> 320px-en 52px, 360px-en 12px levágás (a body overflow-x:clip miatt nem scrollbar, hanem csonkolt szöveg). --------------------------------------------------------------------------- */ @media (max-width: 389px) { .elementor-element-505b41c .elementor-heading-title { font-size: clamp(26px, 9.6vw, 40px) !important; line-height: 1.2 !important; } } /* --------------------------------------------------------------------------- 8) "Szolgáltatásaink" H1 desktopon (>=1025px) Hiba volt: 1025px felett a szöveges hasáb 452-517px-re szűkül, a 70px-es H1 viszont 590px-t igényel -> 73-138px-t kilóg a dobozából minden desktop szélességen (egyetlen szó, tördelni nem lehet). Megoldás: 42-60px közötti skálázás - 60px-en 506px, ami befér. --------------------------------------------------------------------------- */ @media (min-width: 1025px) { .elementor-element-505b41c .elementor-heading-title { font-size: clamp(42px, 4.3vw, 60px) !important; line-height: 1.15 !important; } } /* --------------------------------------------------------------------------- 9) Vízszintes túlcsordulás 1025-1279px között (42-60px) Hiba volt: a "Szájsebészet és implantológia" szekció sorában a két hasáb 64% + 36%, ehhez jön 10px gap és a képre 50px bal margó -> 100% + 60px. 1280px felett a konténer 1140px-es max-width-je középre igazít, és a kilógás beleesik a maradék helybe - ezért csak ebben a sávban látszott (érintett pl. az 1152px-es laptop és az iPad Pro 11" fekvő = 1194px). --------------------------------------------------------------------------- */ @media (min-width: 1025px) and (max-width: 1279px) { .elementor-element-a2ba148 { width: calc(36% - 60px) !important; } } /* --------------------------------------------------------------------------- 10) 320px-es készülékek apró csonkolásai Hiba volt: a fejléc CTA felirata ("Időpontfoglalás") 14px-t, a lábléc logó 10px-t lógott ki a saját dobozából 320px-en. --------------------------------------------------------------------------- */ @media (max-width: 359px) { .elementor-element-dc44120 .elementor-button { padding-left: 16px !important; padding-right: 16px !important; font-size: 16px !important; } .elementor-element-6584707e img { max-width: 100% !important; height: auto !important; } }/* End custom CSS */