1. Piet
  2. de Cock De stem
  3. Gebruikersgroepen Nederland en België
  4. maandag 20 mei 2019
Wie kan mij bijstaan in het beter leesbaar maken van de website op mobiele apparaten? Ik ben wat aan het prutsen geweest in een user.css bestand dat ik heb aangemaakt (en waarnaar uiteraard ook verwezen wordt in de index.php), maar het lukt eigenlijk nog niet om b.v. de gehele menustructuur in de desktop versie te laten "verdwijnen" in de 'smartphoneversie'.
Ik gebruik hiervoor de volgende declaratie:

@media screen and (max-width: 768px) {
.desktop-gebruikers {
visibility:hidden;
}
}

De website is gebouwd met een responsive template. Maar als je in de mobiele weergave een menu-item kiest, dan moet je steeds een heel eind naar beneden scrollen om eerst die menulijst voorbij te komen, alvorens je de pagina die je wil bezoeken kunt lezen.

Er moet dus voor de mobiele weergave ook een andere menustructuur komen, die dan weer niet zichtbaar is voor desktop gebruikers.
"Alles van waarde is weerloos" (Lucebert)
Geaccepteerde antwoord
Patrick Smits
Gebruikersgroep regio Utrecht
Geaccepteerde antwoord Pending Moderation
Hoi Piet,

Als je het volgende in de custom css zet is het opgelost:


@media screen and (min-width: 768px) {
#user4w {
display:none; }
}


Je probeert namelijk een div niet zichtbaar te maken die in een andere zit. Na speurwerk heb ik nu de buitenste div #user4w en daar zet je de display van op none.
Geaccepteerde antwoord Pending Moderation
Hallo Piet,
Heeft jou template ook een positie offcanvas waar je de menu module kan instellen ?
en of heb je al eens geprobeerd als je je hoofdmenu in top positie te krijgen wat er dan gebeurt in mobiel weergave
lvda
Geaccepteerde antwoord Pending Moderation
@Leen
Ik zal er eens naar kijken. Bedankt voor de tips. :)
"Alles van waarde is weerloos" (Lucebert)
Geaccepteerde antwoord Pending Moderation
Ik dacht de oplossing gevonden te hebben met onderstaand user.css:

/* css t.b.v. mobiele weergave. P. Meijer, 21052019 */

@media screen and (max-width: 768px) {
.desktop-users {
visibility:hidden; }
}
@media screen and (min-width: 768px) {
.mobile-users {
visibility:hidden; }
}


En het werkt (!), in zoverre dat de desktopversie keurig de menu's links weergeeft en de mobile versie de menu's onderaan de pagina weergeeft. Maar: in de desktopversie zit er onderaan de pagina een blanco stuk (waarin de menu's 'hidden' zijn, terwijl in de mobiele versie hetzelfde gebeurt met het gedeelte waar de desktop menu's 'hidden' staan).

Is 'hidden' wellicht niet de juiste oplossing? Maar welke dan wel? Zie de afbeeldingen ter verduidelijking.
01Screenshot_2019-05-21Overons-VriendenvanHetSpoorwegmuseum.png 02Screenshot_2019-05-21Over ons-VriendenvanHetSpoorwegmuseum.png
Bijlagen
"Alles van waarde is weerloos" (Lucebert)
Patrick Smits
Gebruikersgroep regio Utrecht
Geaccepteerde antwoord Pending Moderation
Als ik het goed heb komt dit doordat je visibility gebruikt. Gebruik eens display?



/* css t.b.v. mobiele weergave. P. Meijer, 21052019 */

@media screen and (max-width: 768px) {
.desktop-users {
display:none; }
}
@media screen and (min-width: 768px) {
.mobile-users {
display:none;}
}


Hoor het graag!
Geaccepteerde antwoord Pending Moderation
@Patrick Smits
Dank voor je reactie! Ik heb het meteen uitgeprobeerd.
De display optie werkt wel voor het mobiele menu, maar niet voor het desktop menu.

Heb naast jouw voorstel ook weer de visibility er in verwerkt, maar dat geeft geen verandering.
Bijlagen
"Alles van waarde is weerloos" (Lucebert)
Patrick Smits
Gebruikersgroep regio Utrecht
Geaccepteerde antwoord Pending Moderation
Heb je een link dat ik even kan kijken?

Je schrijft dat de website responsive is, maar ik zie geen mobile menu?
Geaccepteerde antwoord Pending Moderation
Zodra je het beeld verkleint verdwijnt op enig moment het desktopmenu en verschijnt onderaan het mobiele menu: Testomgeving
"Alles van waarde is weerloos" (Lucebert)
Patrick Smits
Gebruikersgroep regio Utrecht
Geaccepteerde antwoord Pending Moderation
Lijkt een cache probleem, want op mijn computer werkt het goed. Probeer eens een andere browser.
Geaccepteerde antwoord Pending Moderation
Heb e.e.a. uitgeprobeerd in Edge en Chrome, alle cache bestanden geschoond, maar in de desktopversie blijft er een groot deel onder de tekst blanco. Dit gebied is net zo groot als het mobiele menu; het menu zie je uiteraard niet vanwege de css declaratie 'hidden'.

Misschien in de template iets ondernemen met het gebied "User 4"? Dat wordt namelijk gebruikt door het mobiele menu. Zie het plaatje van m'n template Allerta.
Bijlagen
"Alles van waarde is weerloos" (Lucebert)
Geaccepteerde antwoord Pending Moderation
Hallo Piet,
Het is jammer dat je website veel hoofdmenu items heeft .
maar de postitie user 4 is kwestie van gewoon even uitproberen toch
en je zou ook nog positie topmininav kunnen proberen
lvda
Geaccepteerde antwoord Pending Moderation
@Patrick Smits
Grandioos! Ja, daar had ik even niet aan gedacht die nesting. Heel erg bedankt voor het meedenken. Ook weer het nodige geleerd aan mijn kant. :D
"Alles van waarde is weerloos" (Lucebert)
Geaccepteerde antwoord Pending Moderation
Nabrander: Search console van Google 'zeurt' nu dat Viewport niet is ingesteld. Wat moet ik daar mee?

N.m.m. wordt de website keurig weergegeven op mijn smartphone...
"Alles van waarde is weerloos" (Lucebert)
Patrick Smits
Gebruikersgroep regio Utrecht
Geaccepteerde antwoord Pending Moderation
Eigenlijk moet je deze vraag in een nieuwe topic stellen. Wil je dat volgende keer doen. Is namelijk een nieuw issue.
Jouw template is niet responsive en dat betekent dat zaken als de viewport e.d. nog moeten worden ingesteld.
Zet volgende regel in de head van de index php (template) net onder de die-statement


$doc->setMetaData('viewport', 'width=device-width, initial-scale=1.0' );


Dan moet de melding weg zijn als het goed is.

Groet,
Patrick
Geaccepteerde antwoord Pending Moderation
Ik zie in de head sectie van mijn index.php de volgende regel staan:


<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">


Dat moet toch voldoen?
"Alles van waarde is weerloos" (Lucebert)
Patrick Smits
Gebruikersgroep regio Utrecht
Geaccepteerde antwoord Pending Moderation
Probeer de user-scalable=2.0 en kijk dan eens. Dan geef je toestemming om de pagina tot 200%te vergroten, nu heb je hem op nul.
Geaccepteerde antwoord Pending Moderation
Bedankt! :D
"Alles van waarde is weerloos" (Lucebert)
  • Pagina :
  • 1


Er zijn nog geen reacties op dit bericht.
U mag echter niet reageren op dit bericht.
Sorry de discussie is momenteel gesloten. U kunt nu geen reactie plaatsen.