Elementausrichtung - YouTube Video auf Mobilgerät horizontal zentrieren

[ditho76]

Hallo,

ich habe folgende Seite für meine Praxis gebaut:
www.hypnosepraxis-sperling.de
Diese habe ich mit fester Breite von 800px gestaltet und sie sieht auf PC und Tablet gut aus. Auf Smartphones ist es aber zu breit, so dass das Menü und Bilder abgeschnitten werden. Was kann ich tun, damit die Seite vollständig angezeigt wir auf Smartphones (meine Referenz ist ein Samsung Galaxy S3 Neo mit Firefox).
In der 800px Version funktioniert es wunderbar.
.centered {
left:160px;
position:relative;
display:inline;
}


Zusätzlich baue ich gerade eine mobile Variante, eigentlich mit fester Breite von 320px, aber auch mit dieser festen Breite scheint das Gerät nicht umgehen zu können. Daher möchte ich das Video-Vorschaufenster horizontal zentrieren, habe dafür aber noch keine Lösung gefunden.
Die Seite die ich hierfür baue findet ihr unter:
m.hypnosepraxis-sperling.de

Ich habe dem YouTube-Element die selbstgewählte CSS-Klasse centered zugewiesen.
In den CSS-Einstellungen zur Klasse centered gibt es eine Option Elementausrichtung, die aber keinerlei Auswirkungen im Layout hinterlässt und egal was ich auswähle im CSS-Code nicht angezeigt wird. Was hat diese Option für eine Bewandtnis? Was kann ich tun, damit das Video in der mobilen Version zentriert angezeigt wird, auch wenn man das Gerät in dreht und damit eine Breitansicht erzeugt?

Mobiles CSS Klasse centered (obwohl Elementausrichtung zentriert ausgewählt ist)
.centered {
display:block;
margin:0 auto;
}

Danke und viele herzliche Grüße
Dirk-Thomas Sperling

[Spooky]

.mejs-container {
    margin-left:auto;
    margin-right:auto;
} 

[Maxel]

Warum arbeitest du denn in der mobilen Version der Seite mit einer festen Breite? Ich erstelle dafür immer ein zweites Layout und lege keine Breite fest. Dann macht der Smartphone Browser das dynamisch.

[ditho76]

Ich habe es dann noch um die Hintergrundfarbe ergänzt. Jetzt tut es genau was es soll. Danke.

.mejs-container {
background-color:#fff;
margin-left:auto;
margin-right:auto;
}