Meestal zijn een of meer objecten op de pagina breder dan een telefoonscherm, waardoor de hele pagina te breed wordt. Zet die objecten op Volle breedte met een Max. breedte, dan krimpen ze zodat ze passen. Een computerscherm is breed genoeg om het probleem te verbergen, en daarom ziet de pagina er daar goed uit.
1. Controleer welk type pagina u heeft
Selecteer de pagina in uw paginalijst en ga daarna naar Details > Pagina instellingen > Layout.
| Er staat | Wat dat betekent | Ga naar |
|---|---|---|
| Responsief | Eén pagina die zich aanpast aan elk scherm | Stap 2 tot en met 5 |
| Gecentreerd of Links uitgelijnd | Een pagina met vaste breedte die op een telefoon even breed blijft als op de computer, tenzij u een aparte pagina voor telefoons toevoegt (een mobiele pagina) | Stap 2 en 6 |
Wijzig de Layout van de pagina niet om dit op te lossen. Dat kan uw ontwerp ingrijpend veranderen en de wijziging kan niet ongedaan worden gemaakt.
2. Bekijk de pagina op uw telefoon
Een browservenster op uw computer komt niet altijd overeen met een echte telefoon, dus gebruik een van deze mogelijkheden:
- Uw gepubliceerde website: open hem in een privévenster op uw telefoon. Een privévenster gebruikt de opgeslagen kopie van uw browser niet. Als de pagina er daar goed uitziet, is uw website in orde: zie Ik heb gepubliceerd, maar mijn website toont nog de oude versie.
- Voordat u publiceert: klik op Voorbeeld in de knoppenbalk, kies Preview QR Code (voorbeeld via QR-code) en scan de code met de camera van uw telefoon.
Als het voorbeeld via de QR-code niet laadt:
- Verbind uw telefoon en computer met hetzelfde wifinetwerk en zet een eventuele VPN of iCloud Private Relay uit.
- Als EverWeb meldt dat de lokale voorbeeldserver niet is geactiveerd, ga dan op een Mac naar EverWeb > Voorkeuren > Algemeen, of op Windows naar Wijzig > Opties > Algemeen, en vink Voorbeeldserver gebruiken aan.
Noteer welke objecten uitsteken en los ze daarna een voor een op.
3. Responsieve pagina's: elk object dat te breed is aanpassen
U bent hier aan het juiste adres als de pagina zijwaarts verschuift, aan één kant een witte strook heeft, is afgesneden of naar links is geduwd.
- Selecteer het object. Als het op elke pagina staat, staat het waarschijnlijk op een basismodel (Master Page), dus wijzig het daar.
- Ga naar Details > Formaten (het derde pictogram).
- Vink onder Grootte de optie Volle breedte aan.
- Typ bij Max. breedte hoe breed het object maximaal mag zijn op een groot scherm, bijvoorbeeld de huidige breedte. Het vak blijft grijs totdat Volle breedte is aangevinkt. Laat het op 0 staan om de hele pagina te vullen.
- Als er een getal staat bij Min. breedte, zorg dan dat het kleiner is dan een telefoon. Telefoons zijn ongeveer 375 pixels breed. 0 betekent geen minimum.
- Zet onder Marges en opvulling grote marges links of rechts terug op 0 of op een klein getal. Marges tellen op bij de breedte.
- Herhaal dit voor elk object dat uitsteekt.
Twee uitzonderingen:
- Het object kan niet op Volle breedte worden gezet. Sommige widgets hebben altijd een vaste breedte, zoals de widgets Facebook Page Timeline en PayPal (Legacy). Plaats deze in een Container van ongeveer 280 tot 320 pixels breed.
- Het object gaat niet naar Volle breedte, of blijft te breed, binnen een responsieve rij. Klik er met de rechtermuisknop op (of Control-klik op een Mac), kies Verwijderen uit responsieve rij en volg daarna de stappen hierboven.
4. Afbeeldingen: voorkomen dat ze platgedrukt lijken of ruimte openlaten
Voer eerst stap 3 uit voor de afbeelding, en daarna:
- Selecteer de afbeelding en ga naar Details > Vorm opties (het tweede pictogram).
- Kies onder Vulling in het keuzemenu voor het schalen van de afbeelding Schaal om passend te maken.
- Vink Hoogte aanpassen aan afbeelding aan. Dit verwijdert lege ruimte boven en onder de afbeelding op een telefoon. Het werkt bij afbeeldingen die op Volle breedte en Schaal om passend te maken staan.
| Instelling | Wat uw bezoeker ziet |
|---|---|
| Schaal om passend te maken | De hele afbeelding. Er kan lege ruimte overblijven, tenzij u Hoogte aanpassen aan afbeelding aanvinkt |
| Schaal om te vullen | De afbeelding vult het hele vlak, en de randen kunnen worden bijgesneden |
| Uitrekken | De afbeelding vult het hele vlak en kan op een telefoon platgedrukt lijken |
Als een afbeelding op uw computer wel verschijnt maar op uw telefoon ontbreekt, zet hem dan eens van Schaal om te vullen op Schaal om passend te maken.
5. Het ene onderdeel schuift over het andere heen
Een Container met een vaste hoogte kan niet meegroeien als de inhoud op een telefoon meer ruimte nodig heeft, waardoor het volgende onderdeel eroverheen komt te liggen.
- Selecteer de Container. Als u steeds selecteert wat erin zit, klik dan met de rechtermuisknop en gebruik Selecteer laag.
- Ga naar Details > Widget instellingen (het tandwiel, het laatste pictogram).
- Zet onder Afmetingen de Hoogte op Auto (automatisch).
- Zet Max. hoogte op 0, wat betekent: geen limiet.
- Doe hetzelfde voor alle Containers daarbinnen.
Controleer ook of het object niet op Vrij verplaatsbaar staat (Details > Formaten, onder Positie). Een vrij geplaatst object duwt niets anders omlaag en kan daardoor op een telefoon over andere inhoud heen komen te staan. Zet het vinkje uit als het object met de pagina mee moet schuiven.
6. Pagina's met Gecentreerd
De hele pagina is op een telefoon te klein of afgesneden. Dit type pagina behoudt zijn breedte van de computer. Geef de pagina een aparte versie voor telefoons: zie Mijn website ziet er op een telefoon verkeerd uit.
Tekst overlapt of loopt op een telefoon buiten de vakken. Tekst kan op een telefoon meer regels innemen dan u had ontworpen, waardoor hij niet meer in het vak past. Gebruik Minimale Lettergrootte, zodat de tekst op een klein scherm kleiner kan worden:
- Selecteer de tekst.
- Open de tekstdetails (Text Inspector) en ga naar het onderdeel Lettertype.
- Laat uw normale grootte staan in het vak Font Size (lettergrootte). Vul in het vak Minimale Lettergrootte de kleinste grootte in die u op een telefoon wilt. Bij een lettergrootte van 24 kunt u bijvoorbeeld 18 invullen.
- Ga naar File > Publiceer hele site (menu Archief).
Als al uw tekst in een of twee grote tekstvakken staat, zet dan ook elke alinea in een eigen tekstvak. Lange vakken groeien op een telefoon en duwen andere onderdelen uit hun positie.
7. Controleer of het is gelukt
- Publiceer uw website. Als u meerdere pagina's heeft gewijzigd, gebruik dan File > Publiceer hele site. Zie Wat is het verschil tussen Publiceer en Publiceer hele site?
- Open de pagina in een privévenster op uw telefoon.
Als het is opgelost, verschuift de pagina niet zijwaarts, is er niets afgesneden en staat er niets over iets anders heen. Controleer ook uw andere pagina's, want die gebruiken vaak dezelfde instellingen.
Ziet u nog steeds de oude pagina, zie dan De browsercache legen.
8. Nog steeds niet goed? Stuur ons uw projectbestand
Wij kunnen uw gepubliceerde website zien, maar niet uw projectbestand (de bewerkbare versie van uw website, opgeslagen op uw computer). Daarmee kunnen we precies het object vinden dat het probleem veroorzaakt.
- Ga naar File > Projecten overzicht om de lijst met uw websites te openen, met de titel Welkom bij EverWeb.
- Klik naast uw project op de drie puntjes op een Mac, of op de pijl omlaag op Windows.
- Kies Verstuur project naar Support.
- Als het uploaden klaar is, geeft EverWeb u een link. Stuur ons die link.
Als uw project groter is dan 2GB, of het uploaden niet lukt, gebruik dan onze uploadpagina voor projecten. Pak op Windows de hele map met uw project in als zip-bestand, niet alleen het .ewwinproj-bestand.
Vermeld ook:
- De naam van de pagina, en van het object dat er niet goed uitziet
- Uw versie van EverWeb
- Of u een Mac of Windows gebruikt
En stuur twee schermafbeeldingen mee: één van de pagina op uw telefoon en één van het volledige EverWeb-venster met dat object geselecteerd.