HTML Facebook wie Schaltfläche stört die Reaktionsfähigkeit der Website

Facebook-Seite wie Schaltfläche (nicht Box) ruiniert die Reaktionsfähigkeit meiner Website in Mobile. Unten ist der Code für die Facebook-Like-Button:HTML Facebook wie Schaltfläche stört die Reaktionsfähigkeit der Website

<div class="fb-like" data-href="https://www.facebook.com/myamazingfbpage" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div>

Während die ansprechende Struktur intakt ist, gibt es einen riesigen weißen Raum/Block/Abschnitt in Richtung der rechten Seite des Darstellungs ist. Aus dem Layout der Website ragt nichts hervor, um diesen Leerraum/Block/Abschnitt zu erzwingen. Die Schaltflächen befinden sich in einer linken Seitenleiste.

ich versucht habe display es als inline-block ing, float ed es zu extremen left, reduziert es ist margin und padding zu 0. Darüber hinaus macht es auch den Twitter-Button daneben unklickbar. Ich habe auch versucht, <span> die <div>.

Alle ohne Erfolg.

Vielen Dank meine Freunde im Voraus. :)

Quelle

2016-03-29 Anonymous

Bitte geben Sie genug Code, um das Problem zu replizieren. So wie es aussieht, ist es für uns schwierig zu wissen, ob der eigentliche Facebook-Button oder das CSS Ihrer Website das Problem verursacht. – hungerstar

es muss die fb-taste sein, weil der twitter-taste keine solchen probleme verursacht. Ich entferne die FB-Taste (der genaue Code, den ich gepostet habe) und alles ist wieder normal. –

Wir müssen das für uns selbst überprüfen. Im Moment gibt es für uns fast nichts mehr zu tun. Es ist unwahrscheinlich, dass jemand versuchen wird, Ihr Problem selbst zu reproduzieren. Aus diesem Grund müssen Sie die Mindestanzahl an Code bereitstellen, um Ihr Problem zu reproduzieren und in Ihrer Frage anzugeben. So wie es jetzt aussieht, gibt es einen kleinen HTML-Ausschnitt und ein paar Dinge, die Sie ausprobiert haben (obwohl wir nicht wissen, wie Sie sie angewendet haben). Es ist zu viel für uns hier anzunehmen. Bis Sie mehr Code bereitstellen, erhalten Sie keine richtige Antwort. – hungerstar

Es sieht aus wie Sie ein WordPress-Plugin verwenden und das benutzerdefinierte CSS dieses Plug-Ins verursacht das Problem. Nicht sicher, ob Sie es richtig eingerichtet haben oder nur ein Fehler mit dem CSS des Plugins.

Schuld daran ist der CSS-Selektor:

.fb-like span { 
    overflow: visible!important; 
    width: 450px!important; 
    margin-right: -375px; 
}

Der Wähler über ein <span> Targeting, die das unmittelbare Kind der ist <span> Sie in Ihrer Frage gestellt.

Sie werden in Dev Tools feststellen, dass Ihr Bereich 75px breit ist, obwohl der Button eine spezifische Breite von 49px erhalten hat. Das liegt an der Auswahl oben. Der Selektor oben sagt, dass es 450px breit ist, subtrahiert im Wesentlichen 375px über einen negativen Rand, so dass Sie mit 75px, die den zusätzlichen Platz auf der rechten Seite schafft, da die Schaltfläche nur 49px ist.

Um das Problem zu beheben Sie entweder werden brauchen:

Referenz alle Dokumente, die für das Wordpress verfügbar sein könnten Plugin, um sicherzustellen, dass Sie es richtig konfiguriert haben.
Entfernen Sie den Wahlschalter wenn möglich.
Überschreiben Sie den Selektor, wenn Sie ihn nicht entfernen können.

Wordpress Plugin in Frage: Easy Social Share Buttons

Quelle

2016-03-29 14:09:59 hungerstar

Danke ... eigentlich kann ich dir nicht genug danken. Du warst super nett, obwohl ich dir die Dinge schwer gemacht habe. Danke. –

Ich verwende kein Plugin. Ich habe den Code von Facebook-Entwicklern kopiert. Wie überschreibe ich einen Stil, der standardmäßig "! Wichtig" verwendet und auf welches Stylesheet ich keinen Zugriff habe? –

Ok. Lass es. Ich gehe damit zu weit. Vielen Dank. –

HTML Facebook wie Schaltfläche stört die Reaktionsfähigkeit der Website

Antwort

Verwandte Themen