Некорректное отображение страницы в firefox
333
05 сентября 2017, 08:36
https://codepen.io/old_panda/pen/MvxYyL
<body class="page">
<header class="header header_margin-bottom">
<div class="header-top">
<div class="header-top__inner container">
<div class="row">
<div class="col">
<div class="selection">
<div class="selection__inner">
<span class="selection__icon"><i class="fa fa-map-marker"></i></span>
<span class="selection__description">Новосибирск</span>
</div>
</div>
</div>
<div class="col">
<div class="header__iteraction">
<div class="iteraction-btn">
<span><i class="fa fa-sign-in"></i></span>
<span>Войти</span>
</div>
<div class="iteraction-btn iteraction-btn_pressed">
<span>Регистрация</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="mobile-slide" class="container">
<div class="header__middle">
<div class="row">
<div class="header__item col-lg-3 col-4 header__item_hide">
<div class="logo logo_padding-top">
<img class="img-fluid" src="https://ld-prestashop.template-help.com/prestashop_62342/img/
new-store-logo-1474459566.jpg" alt="">
</div>
</div>
<div id="search" class="header__item header__item_hide col-lg-3 col-4">
<form class="search" action="#">
<input class="search__input" placeholder="Поиск">
<button class="btn btn_search btn_blue"><i class="fa fa-search"></i></button>
</form>
</div>
<div class="header__item header__item_border header__item_hide col-lg-6 col-4">
<div class="contacts">
<div class="contacts__inner contacts__inner_p-right hidden-md-down">
<span class="contacts__area">
<i class="contacts__media fa fa-mobile"></i>
Новосибирск и НСО:</span>
<span class="contacts__number"> +7(499)703-15-15</span>
<div class="contacts__description">
<i class="contacts__media fa fa-clock-o"></i>
7 дней в неделю с 9:00 до 22:00
</div>
</div>
<div class="contacts__inner">
<div class="contacts__action">
<button class="btn btn_blue">Обратный звонок</button>
</div>
</div>
<div class="contacts__inner">
<div class="contacts__action">
<button class="btn btn_background-transparent btn_icon">
<i class="icon icon_big icon_light fa fa-shopping-cart"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="header__bottom">
<div class="row">
<div class="col">
<div class="control">
<ul class="control__inner">
<li class="control__item control__item_first">
<a class="control__title" href="#">Аксессуары</a>
</li>
<li class="control__item">
<a class="control__title" href="#">Запчасти</a>
</li>
<li class="control__item">
<a class="control__title" href="#">Электроника</a>
</li>
</ul>
</div>
<div class="control control_hide control_background-color control_offset">
<ul class="control__inner
control__inner_text-left">
<li class="control__item control__item_border-none control__item_redefine-offset">
<div class="image-btn">
<span class="image-btn__media"><i class="fa fa-sign-in"></i></span>
<a href="#" class="image-btn__link">Вход</a>
</div>
</li>
<li class="control__item control__item_border-none control__item_redefine-offset">
<div class="selection">
<div class="selection__inner">
<span class="selection__icon"><i class="fa fa-map-marker"></i></span>
<span class="selection__description">Новосибирск</span>
</div>
</div>
</li>
<li class="control__item control__item_border-none control__item_redefine-offset">
<div class="data">
<span class="data__location">
<i class="fa fa-mobile"></i> Новосибирск и НСО:
</span>
<br>
<span class="data__num">+7(499)703-15-15</span>
</div>
</li>
<li class="control__item control__item_border-none control__item_redefine-offset">
<div class="back-call">
<span class="back-call__text
back-call__text_color-grey
back-call__text_b-bottom-dashed">
Заказать звонок
</span>
<form class="phone-form
phone-form_hide
back-call__phone-form">
<div class="phone-form__time">
7 дней в неделю с 9:00 до 22:00
</div>
<input class="form-control phone-form__form-control"
data-inputmask-mask="+7(999)999-9999"
data-val="true"
data-val-required="Required"
placeholder="Оставте свой номер телефона"/>
<button class="btn btn_blue btn_wide">Обратный звонок</button>
</form>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="https://use.fontawesome.com/1c8acf37cd.js"></script>
</body>
$blue-color: #13a1f4;
$grey-color: #e1e1e1;
$topline-color: #5d5d5d;
$bottom-footer: #f2f2f2;
$copiright__link: #878787;
$main-slider__title: rgb(33, 35, 46);
$news-items__date: #878787;
$news-items__link: #252a33;
$news-items__text: #5d5d5d;
* { outline: none; }
.page {
font-size: 14px;
font-family: RobotoRegular, sans-serif;
min-width: 320px;
display: flex;
min-height: 100vh;
flex-direction: column;
}
#mobile-slide { display: block ; }
.hide { display: none; }
.show { display: block }
.mobile-header {
display: none;
&__inner {
padding-top: 10px;
}
}
.hamburger {
&__inner {
text-align: right;
padding-right: 10px;
}
}
.header {
&_margin-bottom {
margin-bottom: 20px;
}
&__item {
margin-top: 30px;
font-size: .8rem;
display: flex;
&_border {
border-left: 1px solid #e1e1e1;
}
}
&__iteraction {
display: flex;
justify-content: flex-end;
}
}
.header-top {
background-color: #eeeeee;
padding: 13px 0;
}
.iteraction-btn {
cursor: pointer;
text-decoration: underline;
&:hover {
text-decoration: none;
}
&_pressed {
margin-left: 40px;
}
}
.logo {
display: flex;
justify-content: center;
align-self: center;
&_padding-top {
padding-top: 5px;
}
}
.search {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
position: relative;
width: 100%;
&__input {
border-radius: 2px 0 0 2px;
width: 100%;
padding: 5px 65px 5px 20px;
position: relative;
border: 1px solid $grey-color;
border-right: none;
height: 40px;
}
&_hide {
display: none;
}
}
.btn {
border: 0;
border-radius: 2px;
text-align: center;
cursor: pointer;
outline: 0;
color: white;
font-size: .9rem;
font-weight: bold;
&_search {
width: 50px;
height: 40px;
&:hover {
background-color: black;
}
}
&_blue {
background-color: #13a1f4;
}
&_icon {
padding: 0;
}
&_wide {
width: 72%;
}
&_fix-width {
width: 60%;
}
&_small-text {
font-size: .75rem;
}
&_background-transparent { background-color: transparent; }
}
.icon {
&_big { font-size: 2.5rem; }
&_light { color: #b6bbbf; }
}
.contacts {
height: 100%;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
font-size: .9rem;
&__inner {
&_p-right {
padding-right: 1%;
}
}
&__area {
font-weight: bold;
//margin-right: 1px;
}
&__number {
color: $blue-color;
cursor: pointer;
}
&__media {
color: $blue-color;
font-size: 1rem;
}
&__description {
font-style: italic;
}
}
.control {
&_hide {
display: none;
}
&__inner {
margin-top: 30px;
border-top: 1px solid #e1e1e1;
list-style: none;
padding: 25px 0 0 0;
text-align: center;
&_text-left {
text-align: left;
}
}
&__item {
display: inline;
margin-top: 20px;
font-size: 1rem;
margin-left: 18%;
font-weight: bold;
font-family: Roboto, sans-serif;
text-transform: uppercase;
&_first {
margin-left: 0;
}
}
&__title {
color: #252a33;
&:hover {
transition: .5s;
text-decoration: none;
color: #13a1f4;
}
}
}
.selection {
display: flex;
align-items: center;
position: relative;
&__inner {
font-size: 1rem;
color: $blue-color;
&:hover {
cursor: pointer;
}
}
&__description {
border-bottom: 1px dashed $blue-color;
}
}
.nail { flex:1; }
.main-slider {
&__wrap {
position: relative;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 100px;
}
&__media {
width: 100%;
height: auto;
&_smaller-mv-75 {
width: 75%;
height: auto;
}
}
&__text {
text-align: left;
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
}
&__title {
color: $main-slider__title;
font-family: RobotoLight, sans-serif;
font-size: 2.5rem;
}
&__subtitle {
color: rgb(93, 93, 93);
font-family: RobotoLight, sans-serif;
font-size: .7rem;
&_margin-bottom {
margin-bottom: 25px;
}
}
}
.footer {
&__top-footer {
padding-bottom: 15px;
}
}
.top-footer {
background-color: $bottom-footer;
&_grey-border-bottom {
border-bottom: 1px solid rgba(0, 0, 0, 0.14);
}
}
.bottom-footer {
background-color: $bottom-footer;
&__inner {
padding: 18px 0;
&_padding {
padding-top: 10px;
}
}
&__payment-methods {
float: right;
}
&__data-list {
padding: 15px 0 0 0;
}
}
.copyright {
&__link {
color: $copiright__link;
&_small-font {
font-size: .8rem;
}
}
}
.payment-methods {
&__image {
display: inline-block;
margin-right: 30px;
}
}
.data-list {
padding: 15px 0 0 0;
margin: 0;
list-style: none;
&_tar {
text-align: right;
}
&_tal {
text-align: left;
}
&__item {
margin-right: 10px;
&_margin-no {
margin-right: 0;
}
}
&__description {
font-size: .76rem;
font-weight: bold;
color: #4B4F54;
&_font-big {
font-size: 1.1rem;
}
&_font-w-normal {
font-weight: normal;
}
}
}
.info {
display: inline;
&_display-list {
display: list-item;
}
&__link {
font-size: .8rem;
&_font-medium {
font-size: .9rem;
}
}
}
.news {
}
.text-line {
display: flex;
justify-content: space-between;
align-items: center;
&_margin-bottom {
margin-bottom: 30px;
}
&__action {
&_hover-border-b {
border-bottom: 1px solid transparent;
transition: border-color 0.4s;
&:hover {
border-color: $blue-color;
}
}
}
&__link {
color: #252a33;
&:hover {
text-decoration: none;
color: $blue-color;
transition: .4s;
text-decoration: none;
}
&_border-bottom {
display: block;
border-bottom: 1px solid $blue-color;
}
}
&__title {
font-size: 1.4rem;
}
}
.news-items {
&__item {
text-align: left;
}
&__responsive {
width: 100%;
height: auto;
padding-bottom: 10px;
}
&__responsive,
&__date,
&__title,
&__text { margin-bottom: 8px; }
&__date {
font-size: .8rem;
color: $news-items__date;
}
&__title {
font-size: 1.2rem;
}
&__link {
color: $news-items__link;
text-decoration: none;
&:visited {
text-decoration: none;
color: $news-items__link;
}
&:hover {
text-decoration: none;
transition: .5s;
color: $blue-color;
}
&:active {
text-decoration: none;
}
}
&__text {
color: $news-items__text;
}
}
Блоки с поиском и вводом контактов схлопываются, в чём может быть проблема. Отображение в chrome,opera, IE 11 такое как предполагалось.
-
10:16
-
17:54
-
22:01
-
13:03
-
12:54
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
-
21:25
-
07:04
-
07:46
-
21:56
Перевод документов на английский язык: Важность и ключевые аспекты
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47548 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30490 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23621 visits
- Как через css изменить цвет png изображения? 10345 visits
- Blob video url download 9952 visits
- Php curl запрос через прокси с авторизацией 9205 visits
- Работа с captcha vk api 8087 visits
![Как можно расположить кнопку по центру картинки? [требует правки]](https://hostciti.net/images/nophoto.png "Как можно расположить кнопку по центру картинки? [требует правки]")
© "hostciti.net" 16.11.2024 | 05:48