Логотип не будет отображаться надлежащим образом на актуальном мобильном устройстве [но отображается при изменении размера экрана рабочего стола] - PullRequest
Новая
       30

Логотип не будет отображаться надлежащим образом на актуальном мобильном устройстве [но отображается при изменении размера экрана рабочего стола]

0 голосов
/ 24 мая 2019

Логотип веб-сайта не отображается надлежащим образом на физическом мобильном устройстве, я использую iPhone X. Однако при изменении размера экрана версии для настольного компьютера;логотип адаптируется соответствующим образом

Я изменяю тему, поэтому, пожалуйста, потерпите меня.Я попытался изменить размер с помощью тегов максимальной ширины

Код в пользовательском CSS: 

@media (max-width: 767px){
#logo .retina-logo {
    height: 35%;
    width: 45%;
    margin-top: -2px;
}
}


@media (max-width: 600px){
#logo .retina-logo {
    height: 90%;
    width: 60%;
    margin-top: -2px;
}
}

@media (max-width: 500px){
#logo .retina-logo {
    height: 100%;
    width: 90%;
    margin-top: 4px;
}
}

Не стесняйтесь просматривать www.TattiniBoots на своем мобильном устройстве, чтобы увидеть, о чем я говорюоколо.Вы заметите, что логотип очень маленький и имеет неправильную ширину, которая отображается при изменении размера экрана на рабочем столе

Ответы [ 2 ]

1 голос
/ 24 мая 2019

Очевидно, что ваши медиа-запросы на вашем веб-сайте расположены в неправильном порядке (инспектор говорит, что правила указаны в строке 28/19/11 для 500/600 / 767px) - порядок, отличный от того, который вы разместили в своем коде выше. Так что просто измените порядок этих медиазапросов, так как в противном случае правило 767px перезапишет другие, когда оно последует за другими.

0 голосов
/ 24 мая 2019

Попробуйте добавить <meta name="viewport" content="width=device-width, initial-scale=1.0" /> в <head>

...