Элемент веб-сайта не наследует цвет в меньших размерах экрана

Question

Мой заголовок сайта заключен в строку, установленную на синий фон и желтый цвет шрифта, название, слоган и номер телефона все отображаются правильно в рабочем режиме, но номер телефона не отображается правильно окрашиваются в меньшие размеры экрана (появляется синий цвет). Название и слоган находятся в пределах hgroup, но номер телефона имеет класс элементов «fonebanner». Я пробовал несколько вариантов HTML и CSS-скриптов, но безрезультатно, макет сайта можно посмотреть here - предложения с благодарностью получены.

.row2 { 
 
     background-color: #0000ff; 
 
     color: #ffff00; 
 
    } 
 
    #header .fonebanner { 
 
     clear: right; 
 
     float: right; 
 
     margin-top: 25px; 
 
    } 
 
    #header .fonebanner h2 { 
 
     font-family: Arial, sans-serif; 
 
     font-size: 3em; 
 
     font-weight: bold; 
 
    } 
 

 
    @media screen and (min-width: 180px) and (max-width: 479px){ 
 
    #header .fonebanner { 
 
     display: block; 
 
     float: none; 
 
     margin: 0 0 20px; 
 
    } 
 
    #header .fonebanner h2 { 
 
     font-size: 2em; 
 
    } 
 
    }

<div class="row2"> 
 
     <header id="header"> 
 
     <div id="hgroup"> 
 
      <h1>ABC HTMLDESIGNS</h1> 
 
      <h2>Catchy Slogan!</h2> 
 
     </div> 
 
     <div class="fonebanner"> 
 
      <h2></h2> 
 
     </div>..............

Answer 1

Похоже, вы пропустили скобки в вашем CSS

@media screen and (min-width: 180px) and (max-width: 479px) 
    #header .fonebanner { 
     display: block; 
     float: none; 
     margin: 0 0 20px; 
    } 
    #header .fonebanner h2 { 
     font-size: 2em; 
    } 

должен быть

@media screen and (min-width: 180px) and (max-width: 479px) { 
    #header .fonebanner { 
     display: block; 
     float: none; 
     margin: 0 0 20px; 
    } 
    #header .fonebanner h2 { 
     font-size: 2em; 
    } } 

Answer 2

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

@media screen and (min-width: 180px) and (max-width: 479px){ 
     #header, .row2{ 
     background-color:#fff !important; 
     } 

    }