Seite nicht responsive trotz Bootstrap


Andre267

Erfahrenes Mitglied
#1
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? :D
 

goto;

Erfahrenes Mitglied
#2
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:
CSS:
@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

Erfahrenes Mitglied
#3
Okay, dann stelle ich mal ne doofe frage. :D
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;

Erfahrenes Mitglied
#4
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;