[in versie 6.4] Mobiele pagina css instellingen

[krommetje3108]

Huub,

ik ben niet blij met de mobiele instellingen.

de gedcom_mobile.css heb ik aangepast:
ik heb de main box waarin de gegevens staan een beetje naar beneden brengen gebracht want het logo werd overschreven door de zoekinvoer die ik een andere plaats heb gegeven nabij en naast het logo en ook de favoerietendropdown, daarom moesten deze een beetje naar beneden.

Het liefste had ik mijn oude layout voor de pc's terug maar die vloekt met de mobiele pagina....

ik wil van de cms pagina die de voorpagina is, de breedte voor mobiles aanpassen zodat deze iets breder is dan nu....
welk item in gedcom_mobile.css is dit?

een tweede vraag is hoe ik de TIP verberg of verplaats (een beetje) naar onderen?

[janus]

Het handigste is om op een computer rechts te klikken op de pagina en voor "inspecteren" te kiezen.
Daarna krijg je onderaan (bij FF) of rechts (bij Chrome) een venster, je hebt daar een knop (rechtsboven aan bij FF) om naar mobiele weergave te gaan.
Je kan dan ook nog kiezen welk toestel je gebruikt.
Daarna kun je links (bij FF) met het pijltje aanklikken welk item je wilt aanpassen en dan komt er rechts in de box het bestand en welke regel het is.

Voor iemand anders is het namelijk zeer lastig om te begrijpen over welke pagina je het precies hebt, welke stijl je gebruikt en hoe het er op jouw telefoon uit ziet.

[krommetje3108]

@Janus,

wat jij beschrijft is weel zo'n beetje ook mijn werkwijze maar ik controleer alles nog 'on the fly'. Ik werk met een 3 monitor opstelling dus 1 venster staat op automatisch verversen terwijl ik op een andere monitor de settings wijzig via WinSCP en controleer ook op een Samsung S21 Ultra 5G.

Door de mainbox in GEDOCM.CSS 10px verder naar beneden te verplaatsen, kwam de tip ook weer vrij. Zo staan het zoekinvoerveld en de favieten naast het logo naast elkaar, het menu staat daar weer onder terwijl de originele PC-css was dat ons familiewapen boven het menu staan samen met de Familiespreuk en een kleine foto van alle familieleden. Dit vloekte teveel met de mobiele pagina. Onderzoek via Matomo wijst uit dat een wezenlijk deel van de bezoekers via mobiel op de site komt en daar moest ik dus wel rekening mee houden.

Probleem met de mobiele pagina is dat de voorpagina die getoond wordt, de mainbox, te smal is. Die zou ik het liefste 25px of iets breder hebben. ik heb dat geprobeerd via GEDCOM_MOBILE.CSS te verwezelijken maar ik krijg geen enkel reslutaat.

Het bestuur laat me de vrij hand maar willen wel de controle houden dus ik moet wel naderhand nog instemming vragen aan het bestuur.

[krommetje3108]

@huub,

is er een manier om via css (gedcom.css) de layout aan te passen om zo toch het wapen, de spreuk en de overzichtsfoto te laten zien boven het menu, onder de mainbox zonder dat dat conflicteerd met de mobiele pagina?

wellicht op deze manier?

Code: Select all

styledimg {

background-image: url(path);
background-repeat: no-repeat;
width: 10px;
height: 20px;

}

vervolgens zet je in de PHP die ervoor bedoeld is<div id="styledimg"></div>

komt dit dan ook naar voren als je de mobiele pagina laadt?

[Huub]

De nieuwe layout ziet er wel anders uit, maar in feite heb ik niet zo heel veel gewijzigd.

Op de homepage is om elk item een nieuw vak "homepage_box" gezet, zodat er een randje of een achtergrond ingesteld kan worden bij elk item.
Vervolgens heb ik bij enkele items de indeling wat gewijzigd, zodat de inhoud goed in elk vak past.

Verder zijn de randen van de vakken op alle bladzijden aangepast: minder schaduw, en de hoeken zijn minder rond. Wat strakkere vakken dus.

Bij versie 6.3 zijn de contactformulieren aangepast. Die CSS code wijziging was vrij drastisch, er zijn wat kleine wijzigingen uitgevoerd om te voorkomen dat de layout te veel wijzigde op allerlei bladzijden.
Er zit o.a. deze CSS code in, die ik niet eerder heb gebruikt:

Code: Select all

box-sizing: border-box;

Misschien dat deze nog problemen geeft?

TIP (weet je waarschijnlijk al): in het inspecteer scherm kun je makkelijk CSS codes uit zetten. Ik doe dat regelmatig om te testen.

[krommetje3108]

@Huub,

het klinkt alsof ik de update niet waardeer, dat doe ik wel. Ik moet me voor de CSS S even gaan inlezen over hoe ik de ouce lay-out terug ga krijgen met alleen CSS instellingen. Ook wil ik het Thema vast gaan zetten zodat ik met maar 1 thema rekening hoef te houden.
De update "an sich" bevalt me goed....

[Huub]

Ook wil ik het Thema vast gaan zetten zodat ik met maar 1 thema rekening hoef te houden.

Misschien is dit handig? Ga naar Admin -> Beheer -> Extensies.
Zet onderaan de bladzijde de thema's uit die je niet nodig hebt.

Door de mainbox in GEDCOM.CSS 10px verder naar beneden te verplaatsen, kwam de tip ook weer vrij.

Bedoel je deze tekst bij gezinnen?
"TIP: gebruik [icoon] voor andere (kwartierstaat en parenteel) overzichten."
Misschien ga ik nog testen met deze tekst in de footer.

Ik ben niet van plan om nog verdere drastische CSS wijzigingen door te voeren
Voorlopig ga ik verder met een routing script, en MVC model invoeren voor de scripts.

[krommetje3108]

@huub,

dank je voor de tip over het Thema!

Bedoel je deze tekst bij gezinnen?
"TIP: gebruik [icoon] voor andere (kwartierstaat en parenteel) overzichten."
Misschien ga ik nog testen met deze tekst in de footer.

Je deze tip moest iets naar onderen, in principe staat die tekst goed IMHO....

Ik ben niet van plan om nog verdere drastische CSS wijzigingen door te voeren

Zoals ik al zei, mobiele browsers is een ding tegenwoordig om rekening mee te houden vandaar deze ommezwaai MAAR ik wil graag de oude lay-out terug voor de PC/Latop etc. dus moet ik dat doen via CSS en daar ben ik nog maar een newbie in...

[krommetje3108]

Huub,

is het zo dat de mobiele CSS en de gewone CSS elkaar niet in de weg kunnen zitten?
Ik wil graag mijn oude layout terug maar wil ook de mobiele gebruikers graag een goede oppervlak geven...

het e.a betekent dat de centerbox naar onderen moet om plaats te maken tussen de menubar en de centerbox zodat daar voor de NIET-MOBIELE gebruiker de oude layout terug kan, links ons familiewapen, in het midden ons familiemotto en rechts een kleine foto van de hele familie....

de mobiele gebruiker moet de layout krijgen dit ik nu heb... daar mag dus niets aan veranderen

Peter

[Huub]

is het zo dat de mobiele CSS en de gewone CSS elkaar niet in de weg kunnen zitten?

In header.php regel 624:

Code: Select all

echo '<link rel="stylesheet" media="(max-width: 640px)" href="css/gedcom_mobile.css">';

Het mobiele css bestand wordt geladen bij een max. width van 640px;

In dit bestand staat o.a.:

Code: Select all

.mobile_hidden {
    visibility: hidden;
    width: 0px;
    height: 0px;
    font-size: 0;
}

.mobile_visible {
    visibility: visible;
    width: initial;
    height: initial;
}

Er zijn in dit bestand CSS classes die alleen gebruikt worden op een mobiel apparaat.
Met mobile_hidden worden classes verborgen.
Met mobile visible worden classes weergegeven.


Heel veel meer kan ik er niet over zeggen. Als ik iets wijzig in CSS dan gebruik ik voorbeelden op internet, en ben soms uren bezig om het goed werkend te krijgen op 1 of meerdere bladzijden.