Hinzugefügte Elemente Responsive-Tauglich machen - CSS Media Queries

Guten Abend,

ich möchte einen Script, in dem Kontaktdaten vorhanden sind und ein Bild (300 x 250 px) nebeneinander darstellen. Das ist mir soweit sehr gut gelungen, mit der großen Hilfe eines Forum Mitglieds haben wir es folgendermaßen gelöst.

<div style="width: 574px;"><div style="float: left;"><script type="text/javascript" src="http://www.erotik-jugendschutz.de/pimpress.php?customer=1290" language="javascript"></script></div> <div style="float: right;"><img src="http://escort-star.de/wordpress/wp-content/uploads/kontaktfoto.jpg" alt="kontaktfoto" width="250" height="300" class="alignnone size-full wp-image-7" /></div><br style="clear: both;" /></div>

Allerdings wird die Seite auf Smartphones nicht vollständig angezeigt, dass eingefügte Bild ist kaum zu sehen und das Script ist im unteren Bereich leicht angeschnitten.

Daher meine Frage, weiß jemand wie ich das ganze so lösen kann, dass sich der Inhalt auch dem responsive design anpasst?

Dankeschön

Leider funktioniert es nicht einwandfrei, hier die Ergebnisse sowohl im Hochformat als auch im Querformat. Das sind Screenshots von einem Smartphone.

Was die PC Betrachtung angeht, ist durch die Änderung der Abstand von den zwei Elementen etwas größer geworden. Kann man diese wieder etwas näher zueinander rücken?

Das sieht schon richtig gut aus!

Kannst du mir bitte sagen wo genau ich margin-right:10px; integrieren muss.

Warum sollten Inline-Styles vermieden werden und wie sollte es lieber sein?

Mir ist aufgefallen, dass durch die Änderungen der Link Hinweis auf der Kontakt-Seite im Footer Bereich extrem nach links verschoben ist. Kann mir jemand sagen wie ich den Link-Hinweis wieder in den mittlerern Bereich anzeigen kann?