Seite nicht responsive trotz Bootstrap

[Andre267]

Schönen guten Tag,

ich bin gerade dabei meine Seite etwas zu optimieren, jedoch will nichts so wie ich will.
Die Seite läuft mit Bootstrap und dem schönen Video oben im Header, aber z.B.
das Video verändert sich nicht wirklich von den Verhältnissen mit und sprengt das Layout.

http://www.as-3ddruck.de/

Hinter dem Video ist das Video noch mal als Standbild welches ersichtlich sein sollte,
wenn das Video nicht geladen werden kann.

Jemand eine Idee was ich ändern kann damit ich auf Smartphones oder kleineren Monitoren nicht so ein Salat bekomme?

 

[goto;]

Hallo Andre267,

Bootstrap setzt Du in diesem Fall gar nicht ein.

Es existiert einzig ein Style, welcher bei einer Mindestgröße von 768px dein Video-Tag mit CSS füttern.
Für alle kleineren Bildschirmgrößen ist kein Style definiert.

Auszug:

@media (min-width: 768px)
grayscale.min.css:5
video#bg {
    position: absolute;
    top: 0%;
    left: 0%;
    min-width: 100%;
    min-height: 100%;
    width: 100%!important;
    height: auto;
    z-index: 0;
    -ms-transform: translateX(0%) translateY(0%);
    -moz-transform: translateX(0%) translateY(0%);
    -webkit-transform: translateX(0%) translateY(0%);
    transform: translateX(0%) translateY(0%);
}

Erweitere Dein CSS um Dein Video auch auf kleineren Bildschirmgrößen darzustellen.

Viele Grüße
goto;

 

[Andre267]

Okay, dann stelle ich mal ne doofe frage.
Wie kann ich eine Regel für alles das kleiner ist als 768px definieren?
mit: @media (min-width: 5px) z.B.?
oder: @media (min-width: <768px)

 

[goto;]

Beispielsweise mit:

@media (min-width: 768px) > alles was größer als 768px ist
und
@media (max-width:768px) > alles was kleiner 768px ist.

Viele Grüße
goto;

 

[Andre267]

Oh also war das oben schon die (verbesserte Version)
Ich danke dir vielmals.