Запрос СМИ в CSS Не работает как ожидалось

Мне нужно показать два разных логотипа на моем сайте в зависимости от ширины устройства. Если размер экрана устройства составляет 300 пикселей или меньше, мне нужно показать небольшой логотип.Запрос СМИ в CSS Не работает как ожидалось

Сайт: http://www.geekdashboard.com/

Logo.png ->http://www.geekdashboard.com/wp-content/themes/geekdashboard/images/logo.png

Логотип-small.png -> http://www.geekdashboard.com/wp-content/themes/geekdashboard/images/logo-small.png

CSS:

.header-image .site-title > a { 
    background: url(images/logo.png) no-repeat left; 
    float: left; 
    min-height: 90px; 
    width: 425px; 
}

и CSS для небольших устройств шириной как следует

@media only screen and (max-width: 320px) { 

.header-image .site-title > a { 
    background: url(images/logo-small.png) no-repeat left!important; 
    width: 300px!important; 
} 

}

Этот код не работает должным образом. Я все еще вижу логотип.png даже на устройствах с размером экрана менее 300px Заранее спасибо

источник

2015-09-28 Amar Ilindra

Вы можете поделиться демонстрационной ссылкой? –

Сайт уже работает здесь http://www.geekdashboard.com/ –

Помимо логотипа, я думаю, что до сих пор проблема с вашей мобильной навигацией. Замещенный элемент меню неправильно выровнен с активной ссылкой. –

Specifying the media type should work fine. 

@media only screen and (max-width: 320px) { 
    .header-image .site-title > a { 
    background: url(images/logo-small.png) no-repeat left !important; 
    width: 300px !important; 
    } 
} 

@media only screen and (min-width: 321px) { 
    .header-image .site-title > a { 
    background: url(images/logo.png) no-repeat left; 
    float: left; 
    min-height: 90px; 
    width: 425px; 
    } 
}

источник

2015-09-28 11:50:55 Dinesh

Он работал, менял ширину на 424px с 320px и 425px вместо 321px и отлично работал –

Попробуйте?

@media (max-width: 320px) { 
    .header-image .site-title > a { 
    background: url(images/logo-small.png) no-repeat left !important; 
    width: 300px !important; 
    } 
} 
@media (min-width: 321px) and (max-width: 480px) { 

    .header-image .site-title > a { 
    background: url(images/logo.png) no-repeat left; 
    float: left; 
    min-height: 90px; 
    width: 425px; 
    } 
}

источник

2015-09-28 10:34:24

Нет! Не работал –

Не уверен, но, кажется, кэш включен на вашем сайте, и это не изменилось «logo.png» в «Логотип-small.png» в вашем CSS - http://imgur.com/shhDjYa

Возможно попробовать очистка кеша, это поможет вам!

источник

2015-09-28 12:31:17

может быть проблема с кешем, я очистил кеш и пробовал этот код и работал @ только экран и (max-width: 424px) { .header-image .site-title> a { background: url (images/logo-small.png) no-repeat left! Important; ширина: 300px! Important; }} @media только экран и (мин-ширина: 425px) { .header-изображение .Выходные-заголовка> а { фон: URL (изображения/Logo.png) не повторять слева; float: слева; min-height: 90px; ширина: 425px; } } –

Отлично! Пожалуйста, примите ответ! Приветствия :) –

Запрос СМИ в CSS Не работает как ожидалось

ответ

Смежные вопросы