@mUchenik

Как в отменить правила media.sass и прописать новые?

Всем добрейшего дня!
Друзья, прошу совета, как в отменить правила 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>
  • Вопрос задан
  • 176 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы