Responsive Design funktioniert, aber nicht auf dem Smartphone

Hallo ihr lieben Helferinnen und Helfer,

kaum ist eine Herausforderung gemeistert, stehe ich schon vor einem anderen Problem...
Bei vielem konnte ich mich mit meinem Amateur-Wissen durchbasteln, aber hier bin ich ratlos!

Ich verwende für die Gestaltung einer nicht kommerziellen Seite ein Theme, dass eigentlich im Responsive Design bereit steht.
Das funktioniert auch wunderbar - allerdings nur bis zu einer gewissen Größe des Displays. Bei einer Fenstergröße, wie es zum Beispiel das Smartphone hat, tut die Seite leider nicht das, was sie soll...

Woran liegt das? Eventuell am eingebetteten Video?
Das hier ist der Link zur Seite: www.rapid-cycle.de

Ich möchte mir die (für meine Verhältnisse) mühevoll aufgebaute Seite nicht völlig zerstören und wäre sehr dankbar, wenn jemand einer blutigen Anfängerin ein wenig weiterhelfen könnte

 

Vielen Dank schon mal für die Tipps...
Ich habe clear:both zur div class hinzugefügt, aber es hat sich nichts getan.
Wie sieht das ganze denn dann als Code aus? Die max-width ist auf 100% oder sehe ich das falsch?
</div>
<div class="one_half last">
<div style="clear:both"></div>
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;

video-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;

<h4></h4>
<iframe src="https://www.youtube.com/embed/uraaKNUOAdU" width="560" height="315" frameborder="0">iframe, object, embed {
max-width: 100%;
} </iframe>

Müsste nach diesem Code meine div nicht div class="video-container" sein? Dann rutscht das Video zwar nach unten, aber auch in der normalen Ansicht auf dem PC.