CSS Mobile Определение не применяется?

Question

Я сделал сайт here. Он отлично работает на всех экранах, кроме мобильных, где лозунг слишком велик. Поэтому я добавил определение мобильного CSS для лозунга «Всегда кодирование и заваривание чего-то хорошего», но на моем телефоне ничего не делает? Я использую bootstrap, но только с сеткой и чувствительными элементами. CSS я приложенное ниже в вопросе:

@media (max-width: 480px) { 
 
\t .grabber{ 
 
\t \t font-size: 12px; 
 
\t } 
 

 
}

Answer 1

Вы определили в вашем stylesheet.css следующий порядок стилей:

@media (max-width: 480px) { 
    .grabber{ 
     font-size: 12px; 
    } 
} 
.grabber{ 
    color: #3498db; 
    font-size: 2em; 
    font-family: 'black_roseregular', Arial, sans-serif; 
} 

и из-за обработки css- правила, следовательно, последний стиль шрифта, применяемый к .grabber, будет font-size: 2em;. Все, что вам нужно, - это обмен этими заявлениями следующим образом:

.grabber{ 
    color: #3498db; 
    font-size: 2em; 
    font-family: 'black_roseregular', Arial, sans-serif; 
} 
@media screen and (max-width: 480px) { 
    .grabber{ 
     font-size: 12px; 
    } 
}