CSS - Фиксирующий стиль Typo Breaks Веб-сайт

Question

Ищите небольшую справку CSS. Я работаю над сайтом wordpress для некоторых друзей. Я помещал дочернюю тему CSS вместе, и, создав плавающий ящик для логотипа для совместимости IE/Safari, я нашел опечатку, которая сломает мой сайт, если я его исправлю. В CSS у меня есть:

a{ 
    color:#bb9230;font-size:1.25em 
    } 
.utility-menu 
.social-link 
a:hover 
    { 
    color:#fff 
    } 
} /*EXTRA CLOSING BRACKET*/ 
@media only screen and (min-width: 990px){ 
    .site-header.sticky-not-top 
     { 
     position:fixed;top:-40px 
     }.site-header.sticky-not-top 
.logo{ 
    top:4px 
    } 

.site-header.sticky-not-top .logo 

Это код, оставленные последним парнем, и если я тяну эту дополнительную закрывающую скобку, оно ломает всю верхнюю часть моего сайта. Похоже, что если я удаляю закрывающую скобку, IE обрабатывает код наверху (заголовок сайта и т. Д.) Как «медиа все», а не «только экран для мультимедиа» ... Я немного отстаю, я узнал 8 лет назад на HTML 3.

The полного CSS здесь: http://northcountrycider.com/wp-content/themes/twentyfourteen-child-wood-theme/style.css

Я также снимки экрана проблемы.

Проблемы после удаления скобы: http://i.imgur.com/E6ExIH7.png ^ Пытался оставить раньше, но я могу разместить только 2 ссылки и нет изображения ...

Я новичок в представленные на этом сайте (поиск решения всего времени,), но я старался быть настолько тщательным, насколько это возможно.

Спасибо за ваше время!

Редактировать: Из чего я могу сказать, что это связано с моим экраном @media и (min-width: 673px) Setup ... Кажется, это расширяет это. Я просто не понимаю, что там происходит.

Answer 1

«Дополнительный» кронштейн не является опечаткой, в вашем стиле используется CSS Media Queries для установки разных стилей на основе размера окна браузера. Закрывающая скобка вы определили фактически закрывающая скобку для определения @media ранее в файле:

@media screen and (min-width: 673px) { 
    ... 
} 

Есть еще несколько из этих типов с различным размером в файле. Вложенности позволяет определять различные стили для различного размера экрана (или печать и т.д.)

Вы можете прочитать больше о них здесь: CSS media queries

Answer 2

закрытие закрытия пятно было неправильно.

Как уже упоминался,

media screen and (min-width: 673px) { 

Порция правильно, но расположение закрывающей скобки на полпути через ссылку/форматирование заголовка было причина проблемы. При удалении «лишней» скобки это приведет к тому, что весь сайт войдет в это форматирование. аналогично оставлению открытой скобки комментариев '* /' без закрытия.

Answer 3

Первый раз здесь тоже.

Я прочитал ваше полное CSS и заявил, что эти медиа-запросы не имеют закрывающую скобку:

@media screen and (min-width: 673px) 
@media only screen and (min-width: 990px) 

Кроме того, обратите внимание, что у вас есть два медиазапросы для мин-ширина: 673px (один до 990px ​​и один после). Я использовал редактор, который выделяет соответствующие скобки, парсеры и т. Д. Это может помочь вам лучше увидеть эти проблемы.

Answer 4

Ваш код не отформатирован должным образом, есть много недостающих ';' символы, а отступы немного отключаются - что дополнительно ставит вас под угрозу сбоев.

Если вы переформатируете, в большинстве программ кода вы можете «свернуть» и убедиться, что все правильно вложено и легко устранить все проблемы. Двойная скобка выглядит как закрывающая скобка вышеупомянутого медиа-запроса, если мне придется угадать, что было опубликовано выше.

Чтобы проиллюстрировать, второй запрос СМИ в вашем отрезала должен выглядеть следующим образом:

@media only screen and (min-width: 990px) { 

    .site-header.sticky-not-top { 

    position:fixed; 
    top:-40px; 

    } 

    .site-header.sticky-not-top .logo{ 

    top:4px; 

    } 

} 

Надежда, что помогает!