CSS: float: none; игнорируются

На this website, когда ширина окна просмотра уменьшено до 595px или ниже, следующие CSS должны применяться:CSS: float: none; игнорируются

@media (max-width:595px) { 
    #header-left,#header-right { 
     display: block; 
     width: 100%; 
     float: none; 
    } 
}

Браузер распознающий CSS, и он становится активным, однако, #header-left (который содержит логотип) не на 100%, или #header-right (в котором содержится номер телефона).

То есть, #header-left & #header-right все еще пытаются заняться половиной ширины и появляться бок о бок, а не сверху и снизу друг друга.

Почему это происходит? Благодарю.

источник

2015-07-20 Steve

Вы пропущен и между @media и (макс -width: 595px), вы также должны указать экран. Попробуйте поставить! Важно после вашего CSS также –

Вы используете бутстрап? Поскольку вы используете его, вы можете поместить свои заголовки на полную ширину на небольшой экран, используя классы, такие как 'col-sm-12' или' col-xs-12'. Если нет, попробуйте использовать! Важно после ширины: 100%; такие как 'width: 100%! important;' – VDarricau

Все остальные запросы @media отлично работают без пробелов в(). Браузер активирует правило 'width: 100%;' (он активен в инспекторе кода Firefox). Я не использую bootstrap Valentin. Добавление! Важно ничего не меняет. Правило все еще активно, просто не работает должным образом. – Steve

Удалить position:absolulte; от #logo {position: absolute;top: 0px;left: 0px;} и удалите с #menu Тогда ваш код будет работать нормально.

источник

2015-07-20 04:34:25

Спасибо! Между шириной порта просмотра 500px -> 595px, #menu не отображается. – Steve

Исправлено! Я скорректировал CSS. – Steve

Вы должны переопределить следующие правила комментировали в вашем CSS, специфичные для 595px размер:

#logo { 
    /* position: absolute; */ 
    /* top: 0px; */ 
    /* left: 0px; */ 
} 
#header-right { 
    width: 50%; 
    float: right; 
    padding-top: 8px; 
    /* text-align: right; */ 
} 
#menu { 
    /* position: absolute; */ 
    /*top: 80px;*/ 
    /*left: 0px;*/ 
    background: url(images/menu-bg.png) no-repeat; 
    width: 960px; 
    height: 55px; 
}

Примечание: Override комментируемого правила с

источник

2015-07-20 04:39:28

CSS: float: none; игнорируются

ответ

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