Ondersteuning » Plugin vragen » Facebookknop op WPTouch doet het niet

  • Opgelost cathelijn

    (@cathelijn)


    Hoi allemaal.
    Ik zit enigzins met mijn handen in het haar…
    Ik gebruik als thema Head Blog versie 1.1.0, om de site ook voor mobiel en tablet leesbaar te houden heb ik WPTouch geïnstalleerd. Dit werkte in het verleden allemaal prima. Nu kreeg ik vorige week van iemand de tip dat mijn facebook knop het niet doet, ik krijg een 404 melding. Dit is alleen bij de mobiele versie, zodra ik overschakel naar de desktopversie werkt de fb-knop wel. Als ik daadwerkelijk op een computer test werkt de fb-knop ook. Mijn conclusie is dus dat het in de WPTouch plugin zit omdat alleen de mobiele versie niet werkt.

    Klopt dit? En kan ik hulp krijgen om de fb-knop weer werkend te krijgen voor de mobiele versie?

    De pagina waar ik hulp bij nodig heb: [log in om de link te zien]

15 reacties aan het bekijken - 1 tot 15 (van in totaal 24)
  • Hoi Cathelijn,

    Zo te zien verwijst de Facebook knop op de mobiele versie naar https://www.homecarehuisdierservice.nl/www.facebook.com/hchuisdierservice

    Dus de juiste link wordt achter jouw site URL geplaatst.

    Waarschijnlijk heb je dan als URL achter de knop op de mobiele pagina: www.facebook.com/hchuisdierservice ingevuld zonder protocol (http / https) er voor.

    Als je de link achter de Facebook knop op de mobiele versie vervangt met: https://www.facebook.com/hchuisdierservice dan zal het weer werken.

    • Deze reactie is gewijzigd 6 maanden geleden door DigitPipe.
    • Deze reactie is gewijzigd 6 maanden geleden door DigitPipe.
    Thread starter cathelijn

    (@cathelijn)

    Bedankt DigitPipe
    Maar dit heb ik al geprobeerd, en helaas werkt de knop nogsteeds niet.
    Ook heb ik de knop meerdere keren verwijderd en helemaal opnieuw opgebouwd, maar zonder resultaat.

    Is er een andere oplossing misshcien??

    Guido

    (@guido07111975)

    Hoi,

    Ik kom tot dezelfde conclusie als DigitPipe, lijkt erop dat de FB-link niet juist ingevoerd is.

    Jouw thema heeft ook een mobiel stylesheet, heb je die extra WPTouch plugin daar echt nog voor nodig?

    Guido

    Thread starter cathelijn

    (@cathelijn)

    Hoi Guido.
    Jammer dat ik geen foto mee kan sturen, dan kan ik laten zien dat echt alleen maar het fb-linkje is ingevoerd. Op de manier zoals DigitPipe zei…

    Kan je mij misschien vertellen hoe ik met dit thema een mobiel sheet maak? Want dan lijkt mij dat een goede oplossing 🙂

    Guido

    (@guido07111975)

    Hoi Cathelijn,

    Je thema heeft dit al ingebouwd (CSS voor mobiele weergave), de meeste thema’s tegenwoordig overigens. Kan natuurlijk zijn dat je niet tevreden genoeg daarmee bent, en wel met wat de WPTouch plugin doet.

    Guido

    Thread starter cathelijn

    (@cathelijn)

    Heel erg bedankt Guido!

    Heb je nog een tip hoe ik de indeling voor de mobiel versie overzichtelijker kan maken? De banner en andere afbeeldingen zijn wel erg groot..

    Graag gedaan. Probeer deze fix eens voor kleine schermen:

    
    @media screen and (max-width:767px) {
    	.custom-header {max-height:300px;}
    	.site-heading  {padding-top:50px; padding-bottom:50px;}
    }
    

    Voeg dit toe op pagina Extra CSS van de Customizer.

    Dit maakt de headerafbeelding bovenaan een stuk lager.

    Guido

    Thread starter cathelijn

    (@cathelijn)

    Dat is al een stuk beter Guido, bedankt voor de tip!

    Maar zou u eens mee kunnen kijken op mobiel? De naam van de site in de bannen is nu niet te zien, ik zie alleen het woord ”Home” ivm Home Care Huisdierservice.
    En de tekst naast de foto’s op verschillende pagina’s is raar ingedeeld, heel smal (de woorden worden in stukje gehakt).
    Is aan deze beide punten nog iets te verbeteren zodat de mobiele versie er netzo goed uitziet als de desktop versie??

    Alvast hartelijk bedankt 🙂

    Hoi Cathelijn,

    Je hebt de header bovenaan nu maar 120px hoog gemaakt, dat is wel erg laag, met zo’n lange titel.

    Je kunt lettertype van deze titel wel kleiner maken, door dit aan mijn eerdere CSS toe te voegen, direct onder .site-heading:

    
    h1.site-title a {font-size:30px; line-height:1.5;}
    

    Wat de afbeeldingen betreft, ik kan je een fix geven om ALLE rechts uitgelijnde afbeeldingen in klein scherm te centreren zodat er geen tekst meer naast komt. Of CSS voor specifieke afbeeldingen.

    Guido

    Thread starter cathelijn

    (@cathelijn)

    De 120px hoog heb ik gedaan omdat ik alsnog niet de hele header zag op de mobiele versie, alleen het paard een een stukje van de kat waren te zien. Nu is (als het goed is) wel de volledige header te zien.
    Ik heb de titel kleiner gemaakt met de CSS, maar helaas zie ik alleen nog maar ”Home Care” en niet de volledige naam. Kunnen we hier misschien nog iets mee??

    Is een CSS voor specifieke afbeeldingen ingewikkeld om in te stellen? Het gaat namelijk niet om alle plaatjes op de website.

    Alvast mega bedankt voor alle hulp Guido!!

    Hoi,

    Je hebt de hoogte nu op 120px ingesteld en boven en onder de titel heb je nu 50px padding, dus dan houd je maar 20px voor de titel over. Dat is te weinig. Ik zou de hoogte op minimaal 150px zetten. Of desnoods de padding verminderen.

    Ja, elke afbeelding heeft een eigen ID dus je kunt voor elke afzonderlijke afbeelding CSS toevoegen. Als je bv de bovenste afbeelding op pagina “Even voorstellen” wilt centreren in klein scherm, voeg dit dan toe op dezelfde manier als de andere CSS die ik je doorgaf:

    
    .wp-image-147.alignright {float:none; display:block; margin-left:auto; margin-right:auto;}
    

    Guido

    Thread starter cathelijn

    (@cathelijn)

    Yesss, ik denk dat het met de header gelukt is 🙂 De titel lijkt in het midden te staan en is helemaal zichtbaar.

    Betreft de foto’s met tekst ernaast. De manier met de CSS code, veranderd de indeling dan ook op de desktop versie?? Want dat is niet de bedoeling namelijk. Zoniet, hoe vind ik de bestandsnamen van de overige afbeeldingen.
    Als het de indeling met deze CSS ook op de desktop versie veranderd is misschien een fix toch makkelijker zodat alleen de mobiel versie wordt aangepast?

    Hoi,

    Je moet die CSS dan wel tussen die media query zetten:

    
    @media screen and (max-width:767px) {
    	// hier als je css
    }
    

    om de ID van de afbeelding te vinden, ga met je muis op de afbeelding staan, rechtermuisklik, dan die je bij de class bv wp-image-408 staan. 408 is dus de ID.

    Guido

    Thread starter cathelijn

    (@cathelijn)

    Gelukt met de foto’s, heel erg bedankt!!!!

    Ik zag trouwens met de header dat ik deze alleen heb aangepast op de welkomspagina, kan ik dit trucje vrij simpel aanpassen op alle pagina’s??

    Cathelijn

    • Deze reactie is gewijzigd 5 maanden, 3 weken geleden door cathelijn.
    • Deze reactie is gewijzigd 5 maanden, 3 weken geleden door cathelijn.

    Mooi zo en graag gedaan 🙂

    Ik zie dat de site titel op andere pagina’s geen heading H1 is. Dus dan moet je dit nog even toevoegen aan al die CSS die ik je eerder gaf:

    
    .site-title a {font-size:22px; line-height:1.5;}
    

    Guido

15 reacties aan het bekijken - 1 tot 15 (van in totaal 24)