Всем добрейшего дня!
Друзья, прошу совета, как в отменить правила media.sass и прописать новые?
Подробнее:
При стандартных мониторах, блоки выглядят по 4 вряд, на белом фоне текст, при наведении появляется картинка, кнопка и текст белеет.
Что хочу сейчас сделать но не получается:
В мобильном виде, думаю, что эффект hover не нужен и надо сделать, что бы кнопки, и картинки по умолчанию выводились в блоках.
вот код sass :
.items
max-width: 1000px
margin: 0px auto 0
.item
float: left
background-color: #fff
width: 97%
height: em(400px)
box-shadow: 0 0 19px rgba(10, 10, 10, 1)
position: relative
padding: 70px 10px 10px
margin: 1%
text-align: center
box-sizing: border-box
outline: 2px solid #32d3ff
outline-offset: -7px
h3
color: #000
text-align: center
font-size: 20px
.sbottons
display: none
background-color: #F39F18
border: 0
padding: 5px
font-size: em(18px)
font-family: sans-serif
bottom: em(60px)
position: absolute
width: 80%
margin-bottom: em(15px)
margin: 0 -41%
a
color: #000
text-decoration: none
box-shadow: 0 3px 0 #B97200
border-radius: 10px
// margin: em(0px) em(-103px)
transition: all .5s ease
&:after
content: ''
position: absolute
top: 20px
left: 0
right: 0
margin: auto
width: 46px
height: 46px
background: url(../img/ico-lp-offer-46px.png) no-repeat
&_1
&:after
background-position: 0 0
&:hover
background: url(../img/team/rain.jpg) no-repeat
background-size: 100%
&:after
background-position: right 0
&_2
&:after
background-position: 0 -46px
&:hover
background: url(../img/team/rain.jpg) no-repeat
background-size: 100%
&:after
background-position: right -46px
&_3
&:after
background-position: 0 -92px
&:hover
background: url(http://www.sgs66.ru/img/raboti/montaj-rab.jpg) no-repeat
background-size: 100%
&:after
background-position: right -92px
&_4
&:after
background-position: 0 -138px
&:hover
background: url(http://www.sgs66.ru/img/raboti/montaj-rab.jpg) no-repeat
background-size: 100%
&:after
background-position: right -138px
&:hover
color: #fff
h3
color: #fff
.sbottons
display: inline-block
& a:hover, &:focus
color: #fff
text-decoration: none
&:hover
background-color: #F3B046
&:active
background-color: #986107
transform: translateY(4px)
&:before
// outline-color: #fff
background-color: #394b5f
opacity: 0.85px
Вот участок кода html :
<div class="conteiner" id="lp-offer">
<div class="row">
<div class="col-md-3 col-lg-3">
<div>
<div class="items">
<div class="item item_1">
<h3>блок_1</h3>
<p>Обсалютно всякий текст</p>
<div class="sbottons">
<a href="#callback" class="sbuttons">Как выровнять</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-lg-3">
<div class="items">
<div class="item item_2">
<h3>Блок_2</h3>
<p>Всякий текст"</p>
<div class="sbottons">
<a href="#callback" class="sbuttons">Заказать консультацию</a>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-lg-3">
<div class="items">
<div class="item item_3">
<h3>Блок_4</h3>
<p>Текст всякий</p>
<div class="sbottons">
<a href="#callback" class="sbuttons">Кнопка</a>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-lg-3">
<div class="items">
<div class="item item_4">
<h3>Блок_4</h3>
<p>Текст всякий</p>
<div class="sbottons">
<a href="#callback" class="sbuttons">Заказать материалы</a>
</div>
</div>
</div>
</div>
</div>
</div>