Birdseye Weebly theme- Сделать мобильный логотип крупнее и по центру

Question

Я шатаюсь в кодировании и работаю на веб-сайте Weebly Birdseye. Логотип отлично смотрится на рабочем столе, но он крошечный в мобильном заголовке. Я хотел бы, чтобы это было больше и сосредоточено. Любые советы приветствуются! Вот CSS для заголовка (первый участок рабочего стола, а затем мобильный сайт):

/* 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

Похоже, вы уже изменили .container .birdseye-заголовок {от максимальной высоты: 80px; до максимальной высоты: 100%; так что это хорошее начало.

Медиа-экран ...

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

... заставляет изображение сокращаться, так что вам нужно будет increate Макс-высота: 40px; на ваш предпочтительный размер пикселей. Возможно, что-то вроде 80px

** Тем не менее, я должен отметить, что заполнение .container .banner-wrap. Может потребоваться изменить и должно быть изменено с 60 пикселей на высоту логотипа.

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

---

Что касается центрирования логотипа, вы должны быть в состоянии сделать что-то вроде этого:

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