Guten Tag,

ich habe auf meiner Seite 3 nebenstehende Elemente , die aus Facebook embed codes/Plus Ins bestehen. 2 Beiträge die mittels eines emebed Codes dargestellt werden und ein Plugin zu den Events, die auf der FB Seite erscheinen. In der Desktop Version werden die Sachen auch korrekt dargestellt.
Tablet/mobile- alles verschoben, bzw zerschossen. Anbei die Beispiele zu den Codes...was ist schiefgelaufen? Danke Euch

<iframe src=
"https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fpg%2FKiezGiganten%2Fevents%2F&tabs=events&width=750&height=531&small_header=true&adapt_container_width=true&hide_cover=true&show_facepile=true&appId"
width="480" height="600" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
 

<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FKiezGiganten%2Fposts%2F360681667810643%3A0&width=500" width="310" height="531" style=
"border:none;overflow:hidden" scrolling="no" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
 

 

Ich habe die Beitragscodes durch die Funktion 'einbetten' generiert, den Event Code (ist automatisch aktualisiert, sobald auf FB neue Events reingestellt werden) durch den FB Plug in/ FB Developers...

Wird wohl an den festen Pixel-Werten für Höhe und Breite liegen.

ok und was wäre das optimale um die Elemente symmetrisch darzustellen und zwar auf jedem device und in jedem betriebssystem? anbei die ansicht die es auf der webseite (chrome/mac) gibt-so soll es auch auf allen devices aussehen...

anbei die eingebetteten codes und deren jetzige pixel werte....hilfe :-)

<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FKiezGiganten%2Fposts%2F360681667810643%3A0&width=500" width="310" height="531" style=
"border:none;overflow:hidden" scrolling="no" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
 
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FKiezGiganten%2Fposts%2F360681667810643%3A0&width=300" width="310" height="531" style=
"border:none;overflow:hidden" scrolling="no" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FKiezGiganten%2Fposts%2F360681667810643%3A0&width=300" width="310" height="531" style=
"border:none;overflow:hidden" scrolling="no" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
 
 

anbei noch die screens

Zitat von aggi im Beitrag #3

---

ok und was wäre das optimale um die Elemente symmetrisch darzustellen

---

magst Du mir bitte einen Beispiel geben, anhand eines Codes, wie ich es ändern/ bearbeiten soll? Ich bin halt kein Developer :-/

Danke sehr agnieszka

http://maddesigns.de/responsive-iframes-2417.html

danke sehr , ich versuche es :-/

ich habe den Beispielcode jetzt wie folgt abgeändert, leider funktioniert es immer noch nicht responsive- wäre dankbar über jegliche tipps, was ich falsch gemacht habe. vg agnieszka

<div class=“embed-container“ >
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FKiezGiganten%2Fposts%2F360681667810643%3A0&max-width=100%" width="100%" height="531" style=
"border:none;overflow:hidden" scrolling="no" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
 

Bei mir sieht deine Seite in der mobilen Ansicht auch ok aus.

Danke Euch für Eure Hilfe, Ich schaue mir das noch übers Wochenende nochmal an, auf verschiedenen Devices. Und versuche es mit dem Hard-Reload auch. Irgendwie sah es halt ziemlich zerschossen aus das ganze. Noch eine Frage bzgl. der Buttons: im vertikaler Ansicht vom Bildschirm sind sie an die Breite der FB-Beitragsbilder angepasst, wenn man aber die Bildschirmansicht horizontal ausrichtet, sind sie länger als die eingebetteten FB-Beiträge, was ziemlich doof aussieht.

Wie kann ich diese anpassen, so dass sich auch deren Länge je nach Ansicht verändert?

Anbei ein Beispielcode von dem Button. Danke Euch und vorab schon ein schönes Wochenende für Euch

<a class="hs-button fullwidth-btn text-center strong-blue" >KiezNews</a>
 

Danke Agnieszka