CSS перекрывание стилей
Пытаюсь сделать адаптивным дизайн кнопки, ибо на мобилках смотрится сильно плохо, согласно документации и примерам из интернета пытаюсь поместить в конец CSS код примерно такого вида, но в браузере все равно отображается тот стиль, который не заключен в эту конструкцию. Что работает не так?
@media screen and (max-width: 650px) {
button#play{
width: 25%;
}
} 
Код рабочий и правильный. Покажи оригинальные стили кнопки.
Ну, получается сейчас таблица этого элемента выглядит так
@media screen and (max-width: 400px){
button#play {
width: 1%;
}
}
button#play {
position: static;
width: 25%;
height: 25%;
border: 1px;
line-height: 1.5;
padding: 0 20px;
font-size: 2.5rem;
text-align: center;
color: #fff;
text-shadow: 1px 1px 1px #000;
border-radius: 10px;
background-color: #6C8428;
}
@media screen and (max-width: 400px){
button#play {
width: 1% !important;
}
} Также через F12 подсказывает еще, что будет подтянут шрифт, но вроде это и не должно сказаться?
Других CSS нет, button не объявлен.
Вот это поворот, при тесте на реальном телефоне (даже на 2х)тоже все норм...
Никогда не сомневался в панели разработчика, но получается, что недорабатывает она, неужели придется эмулятор ставить для тестов или сервер поднимать на локалке =)
Возможно, вы не учли приоритетность стилей. В CSS приоритетность стилей определяется порядком их объявления. Таким образом, если вы объявляете стиль для кнопки в общем контексте, а затем пытаетесь переопределить его в медиа-запросе, то последний будет иметь больший приоритет. Поэтому вам нужно проверить, нет ли других стилей, которые могут перекрывать ваш стиль для кнопки. Если да, то вам нужно переместить ваш стиль для кнопки в медиа-запрос или добавить !important к нему, чтобы он имел больший приоритет.
button#play {
position: static;
width: 25%;
height: 25%;
border: 1px;
line-height: 1.5;
padding: 0 20px;
font-size: 2.5rem;
text-align: center;
color: #fff;
text-shadow: 1px 1px 1px #000;
border-radius: 10px;
background-color: #6C8428;
}
@media screen and (max-width: 400px){
button#play {
width: 1% !important;
}
} Также через F12 подсказывает еще, что будет подтянут шрифт, но вроде это и не должно сказаться?
Других CSS нет, button не объявлен.
Есть еще какие-либо идеи, почему отрабатывает только начало?
попробуй !imortant