Birdseye Weebly Thema - Machen Sie Handy-Logo größer und zentriert

Question

Ich dabble in der Codierung und arbeite an einer Weebly Birdseye Website. Das Logo sieht auf dem Desktop gut aus, ist aber im mobilen Header winzig. Ich möchte, dass es größer und zentriert wird. Jeder Rat wird geschätzt! Hier ist die CSS für den Header (zunächst die Desktop-Website und dann die mobile Website):

/* Header */ 
.birdseye-header { 
    position: fixed; 
    z-index: 12; 
    overflow-y: hidden; 
    width: 100%; 
    padding: 10px 10px; 
    box-sizing: border-box; 
    backface-visibility: hidden; 
    -webkit-backface-visibility: hidden; 
    -webkit-transition: all 250ms ease; 
    -moz-transition: all 250ms ease; 
    -ms-transition: all 250ms ease; 
    -o-transition: all 250ms ease; 
    transition: all 250ms ease; 
} 
.birdseye-header .container { 
    display: table; 
    overflow-y: hidden; 
    width: 100%; 
    max-height: 100px; 
} 
.birdseye-header label.hamburger { 
    display: none; 
} 
.birdseye-header .logo { 
    display: table-cell; 
    overflow-y: hidden; 
    margin-right: 30px; 
    padding: 0; 
    vertical-align: middle; 
    line-height: normal; 
} 
.birdseye-header .logo a { 
    display: block; 
    margin-right: 30px; 
    margin-left: 10px; 
    color: #ffffff; 
    text-transform: uppercase; 
    letter-spacing: 0.03em; 
    font-family: 'Open Sans', sans-serif; 
    font-size: 24px; 
    font-weight: 600; 
    line-height: normal; 
} 
.birdseye-header .logo img { 
    display: block; 
    overflow: hidden; 
    max-width: 400px; 
    max-height: 300px; 
} 

/* Header */ 
    .birdseye-header { 
    min-height: 40px; 
    padding: 10px 10px; 
    background: rgba(255, 248, 220, 0.95); 
    } 
    .birdseye-header .logo { 
    overflow: hidden; 
    padding-right: 8px; 
    } 
    .birdseye-header .logo a { 
    margin-left: 0; 
    margin-right: 0; 
    font-size: 1.1em; 
    line-height: 1.4em; 
    } 
    .birdseye-header .logo img { 
    max-height: 400px; 
    vertical-align: middle; 
    } 
    .birdseye-header .logo #wsite-title { 
    display: block; 
    max-width: 100%; 
    font-size: 1.1em !important; 
    line-height: 1.4em !important; 
    } 
    .birdseye-header .container { 
    min-height: 40px;} 

Answer 1

Sieht aus wie Sie bereits den .birdseye-header .Behälter geändert {von max-height: 80px; zu maximaler Höhe: 100%; Das ist ein guter Anfang.

Medien Bildschirm ...

@media screen and (max-width: 992px) { 
.birdseye-header .birdseye-header, .birdseye-header .logo, .birdseye-header .logo img { 
    max-height: 40px; 
} 
} 

... bewirkt, dass das Bild verkleinern, so dass Sie den max-height increate müßten: 40px; zu Ihrer bevorzugten Pixelgröße. Vielleicht etwas wie 80px

** Allerdings sollte ich beachten, dass die .banner-wrap .container Polsterung muss möglicherweise geändert werden/sollte auch von 60px zu was auch immer die Höhe des Logos ist.

@media screen and (max-width: 992px) { 
.banner-wrap .container { 
    padding: 60px 20px; 
} 
} 

---

Wie für die Logo Zentrierung, sollten Sie in der Lage sein, so etwas zu tun:

@media screen and (max-width: 992px) { 
.birdseye-header .logo img { 
    margin: 0 auto; 
} 
}