Ha weboldaladat telefonon nézed, és egy zavaró fehér csíkot vagy felesleges rést látsz, akkor valószínű, hogy egy whitespace (felesleges üres tér) problémába ütköztél. Ez gyakran előfordul mobilon, ha a weboldal nincs megfelelően optimalizálva. Ebben a cikkben bemutatjuk, hogyan lehet gyorsan azonosítani és kijavítani ezt a hibát.
1. Mi okozza a whitespace hibát?
A whitespace problémáját általában a következő dolgok okozzák:
- Túl nagy elemek: Egy adott szekció vagy elem szélessége nagyobb, mint a képernyő.
- Hosszú szavak vagy címek: Pl. „duguláselhárítás”, ha túl nagy betűmérettel jelenik meg, akkor kilóghat a mobilos képernyő szélére. Egy ügyfelemnek így oldottuk meg!
- Nem megfelelő konténerméret: A szekció vagy a konténer nincs megfelelően lekorlátozva.
- Lenyitható menük vagy felesleges margók: Egy ipari drónokat forgalmazó ügyfelem weboldalán (zdrone.hu) a footerben lévő menüpontok voltak túl hosszúak, és ezek okozták a whitespace hibát.
2. Hogyan ellenőrizd, hogy mi okozza a hibát?
- Nyisd meg a weboldalt mobilnézetben, vagy csökkentsd az asztali böngészőben az ablak szélességét.
- Ellenőrizd a fehér csíkokat: Ha oldalra húzható az oldal, akkor biztos, hogy valamelyik elem kilóg.
- Nyisd meg a böngésző fejlesztői eszközeit (F12), majd kattints az „Elemek” (Elements) fülre.
- Válassz ki egy gyanús elemet, majd a CSS-ben keresd meg a szélességet (width). Ha az „overflow” nincs megfelelően beállítva, akkor az elem kilóghat.
- Ha hosszú szavak vagy címek okozzák, akkor azokat kisebb betűmérettel érdemes megjeleníteni, vagy a szövegtörést bekapcsolni.
3. Hogyan javítsd a whitespace hibát?
Ha találtál egy elemet, ami kilóg, akkor az alábbi CSS kódot alkalmazd az Egyedi CSS részben (vagy ha Elementor/Bricks Builder szerkesztőt használsz, akkor az adott elemre is beállíthatod).
A teljes oldal whitespace hibájának kiküszöbölése:
html, body {
overflow-x: hidden;
max-width: 100%;
}4. Hol add hozzá a kódot?
- Ha szeretnéd, hogy minden oldalon érvényes legyen, akkor a Fejlécben (header) vagy Láblécben (footer) helyezd el az egyedi CSS kódot.
- Elementor, Bricks Builder vagy más vizuális szerkesztő esetén a problémás elem CSS-beállításai között is elvégezheted a módosítást.
5. Mi van, ha ezek sem segítenek?
Ha a fentiek sem oldják meg a whitespace hibát, akkor ellenőrizd az alábbiakat:
- Margin és padding beállítások: Ha egy szekció túl nagy margóval rendelkezik, csökkentsd az értékeket.
- Flexbox vagy Grid beállítások: Ha a konténerek egymás mellett vannak, ellenőrizd, hogy megfelelően oszlanak-e el.
- Tesztek mobil eszközökön: Minden mobilböngésző egy kicsit máshogy kezeli a megjelenítést, érdemes több eszközön is kipróbálni.
Összegzés
A whitespace hibák sok fejfájást okozhatnak mobilnézetben, de egy kis CSS módosítással gyorsan javíthatók.
Tudod, hogy mi a hiba?
Alkalmazd a megfelelő CSS beállítást!
Nem találod, mi a gond?
Ellenőrizd az elem szélességét fejlesztői eszközökkel!
Még mindig nem működik?
Kísérletezz margin, padding és overflow beállításokkal!
Ezekkel a módszerekkel a fehér csíkok végre eltűnnek a mobilos nézetből!
Karcsi voltam, és remélem, tudtam neked segíteni! Ha még kérdésed van, írj nekem, és együtt megoldjuk a problémádat. De ha beleuntál az oldalad szerkesztésébe, akkor is keress meg, mert tudod: a sikeres weboldalad az én sikerem!
