Ankündigung

Einklappen
Keine Ankündigung bisher.

Mobiles Logo mittig

Einklappen
X
Einklappen
Momentan aktive Benutzer in diesem Thema: 1 (0 Benutzer und 1 Gäste)
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    [gratis] Mobiles Logo mittig

    Hier mal ein CSS, welchen Ihr in euer Template css_additional.css einfügen könnt um das Logo mittig darzustellen.

    Momentan wird die toolbar (in der hier im Forum die Links, sowie die Angaben der Beiträge und im Standard die Suche stehen) in der mobilen Version komplett ausgeblendet und daher überhaupt nicht verwendet. Trotzdem wird diese in der mobilen Version mit 70% des headers belegt (Achtung bei Ad-Bannern im Header -> wurde nicht von mir getestet).

    Wir können diese in der mobilen Ansicht also ausblenden und das Logo statt dessen größer und mittig darstellen.
    Als Demo könnt Ihr euch dieses Forum einfach auf einem Smartphone anschauen:

    vBulletin5 Mobile Logo Center

    Den folgenden CSS-Code könnt Ihr einfach an die bisherig eingefügten CSS-Codes anfügen:

    Code:
    /* Beginn Header Mobile*/
    .l-small #header .site-logo {
        margin: auto auto auto auto !important;
        display: flex !important;
        padding-bottom:0px;
    }
    .l-small #header .site-logo a {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px;
    }
    .l-small #header .site-logo img {
        /*die 110px einfach anpassen wie es bei eurem Logo am besten passt*/
        max-height:110px !important;
    }
    .l-small #header .toolbar, .l-small #header .disable-overlay {
        display: none;
    }
    .l-small .header-cell {
        width:100%;
    }
    .l-small #header .toolbar {
        width:10px;
    }
    /* Ende Header Mobile*/
    Schon wird euer Logo in der Smartphone-Ansicht mittig und größer dargestellt.
    Bitte passt die Größe des Bildes noch für das von euch verwendete Logo an indem Ihr die 110px auf einen passenden Wert ändert.
    It`s nice to be important but it`s more important to be nice!
Lädt...
X