@Pazzetif

Уезжает блок при адаптиве, как исправить?

Доброго времени суток. Изначально блок выглядит вот так. Все работает отлично
5acf67582b072735085355.png

При переключении на разрешение планшета происходит вот это:
5acf6776d3a19720530013.png

Использую Less и SmartGrid

На меньших разрешениях все нормально.
<div class="item">
					<div class="cube">
						<a href="#"><img src="/assets/img/first.jpg" alt="">
						<i class="icon-mobile"></i></a>
							<div class="textBox">
							<h3>Адаптивная верстка</h3>
						<p>Ваш сайт будет отлично выглядить с планшетов и мобильных устройств.</p>
					</div>
						</div>
				</div>


.item {
		text-align: center;
		justify-content: space-between;
			.md-block({
		.size(12);
		
		});
	}

	.cube {
		
		position: relative;
		overflow: hidden;
		margin-bottom: 20px;
	a {
		display: block;
	}
	

	
	a i {
		position: absolute;
		font-size: 40px;
		color: #15A4FA;
		right: 0;
		left: 0;
		top: 0;
		bottom: 0;
		width: 80px;
		height: 80px;
		margin: auto;
		text-align: center;
		line-height: 80px;
		transform: scale(3);
		transition: 0.5s;
		background: rgba(21,164,250, 0.3);
		box-shadow: 8px rgba(180,180,180, 0.3);
		border-radius: 100%;
		opacity: 0;

	}

	
	a img {
		width: 100%;
		height: 100%;
		transition: 0.5s;
		max-width: 320px;
		overflow: hidden;
	}

	a:hover img{
		transform: scale(1.2);

		
	}
	

}
	.cube:hover a i {
		opacity: 1;
		transform: scale(1);
		z-index: 2;
	}
	.cube .textBox {
		position: absolute;
		bottom: 5%;
		color: #fff;
		background: rgba(0,0,0, 0.3);
		max-width: 100%;
		text-transform: uppercase;
		transition: 0.5s;
		font-family: 'Roboto Slab', serif;


	}
		
		.cube:hover .textBox {
			transform: translateY(150%);
		}
		h3 {
			border-top: 1px solid;
			border-bottom: 1px solid;
			font-size: 20px;
			font-weight: bold;
			margin: 6px 0;
		}

		p {
			text-transform: none;
			font-size: 13px;
			letter-spacing: 2px;
			margin-bottom: 3px;
			color: #fff;
			box-shadow: 2px black;
		}
  • Вопрос задан
  • 167 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы
Sveak Барнаул
от 40 000 руб.
iXBT Москва
от 70 000 до 90 000 руб.
Blogman Оренбург
от 20 000 до 60 000 руб.
22 сент. 2018, в 18:59
3000 руб./за проект
22 сент. 2018, в 18:55
25000 руб./в месяц
22 сент. 2018, в 18:40
60000 руб./за проект