fil_and
@fil_and
Делаю сайт гимнастики

Как убрать отступ у картинки?

Господа) помогите разобраться, что у меня за полоска справа от 1 и 3 картинки, как убрать?
1bf2f0bc57ea4105a96d5765059d55fb.png
Сначала думал, что картинка недостаточно узкая, но сделал шире и ниже, но полоска остаётся. В средствах разработчика в браузере не навести на эту полоску, чтобы посмотреть блок. Вот страница
вот html:
<div class="zag">Наши услуги</div>
  <div class="grid">
<div style="width: 30% ;float:left;margin-left:2.5%">
					<figure class="andrei">
						<img src="http://vh166963.eurodir.ru/wp-content/themes/gymbalance/images/test_lesnaya.jpg" alt="секция художественной гимнастики спб"/>
						<figcaption>
							<h2><span>Групповые тренировки</span></h2>
							<p>Занятия в группах не более 8 человек 2 раза в неделю по 1 часу</p>
							<a href="#">Подробнее</a>
						</figcaption>			
					</figure>

<a href="#win1" style="color:#fff;" class="box-button2" >Подробнее и запись</a>

<a href="#x" class="overlay_det" id="win1"></a>
        <div class="popup_det">
            <form method="post" action="javascript:void(0);" onsubmit="send_form();" id="forma">
<input type="text" name="fio" placeholder="Ф.И.О" />
<input type="text" name="phone" placeholder="Телефон" />
<input type="text" name="email" placeholder="Возраст девочки" />
<input type="text" name="adres" placeholder="Адрес зала" />
<textarea type="text" placeholder="Комментарий"></textarea>
<br/>
<button type="submit" value="отправить" /> Записаться </button>
</form>
<a class="close_det" title="Закрыть" href="#close_det"></a>
        </div>



</div>
<div style="width: 30%; float:left;margin-left:2.5%">
<figure class="andrei">
						<img src="http://vh166963.eurodir.ru/wp-content/themes/gymbalance/images/gymnastika.jpg" alt="img18"/>
						<figcaption>
							<h2><span>Индивидуальные занятия</span></h2>
							<p>Персональные тренировки по индивидуальному плану, исходя из конкретных потребностей гимнастки</p>
							<a href="#">Подробнее</a>
						</figcaption>			
					</figure>

<a href="#win2" style="color:#fff;" class="box-button2" >Подробнее и запись</a>
<a href="#x" class="overlay_det" id="win2"></a>
        <div class="popup_det">
            <form method="post" action="javascript:void(0);" onsubmit="send_form();" id="forma">
<input type="text" name="fio" placeholder="Ф.И.О" />
<input type="text" name="phone" placeholder="Телефон" />
<input type="text" name="email" placeholder="Возраст девочки" />
<input type="text" name="adres" placeholder="Адрес зала" />
<textarea type="text" placeholder="Комментарий"></textarea>
<br/>
<button type="submit" value="отправить" /> Записаться </button>
</form>
<a class="close_det" title="Закрыть" href="#close_det"></a>
        </div>


</div>
	<div style="width: 30%; float:left;margin-left:2.5%;">				<figure class="andrei">
						<img src="http://vh166963.eurodir.ru/wp-content/themes/gymbalance/images/sostavlenie-uprazhnenij-vystupleniya.jpg" alt="составление программы выступления на соревнованиях"/>
						<figcaption>
							<h2><span>Составление выступлений</span></h2>
							<p>Составление уникальных упражнений для выступления на соревнованиях по художественной гимнастике</p>
							<a href="#">Подробнее</a>
						</figcaption>			
					</figure>

<a href="#win3" style="color:#fff;" class="box-button2" >Подробнее и запись</a>




<a href="#x" class="overlay_det" id="win3"></a>
        <div class="popup_det">
            <form method="post" action="javascript:void(0);" onsubmit="send_form();" id="forma">
<input type="text" name="fio" placeholder="Ф.И.О" />
<input type="text" name="phone" placeholder="Телефон" />
<input type="text" name="email" placeholder="Возраст девочки" />
<input type="text" name="adres" placeholder="Адрес зала" />
<textarea type="text" placeholder="Комментарий"></textarea>
<br/>
<button type="submit" value="отправить" /> Записаться </button>
</form>
<a class="close_det" title="Закрыть" href="#close_det"></a>
        </div>

</div>
				</div>
  </div>
  <div class="zag">Отзывы</div>


вот css:

.grid {
	position: relative;
	clear: both;
	margin: 0 auto;
	padding: 1em 0 4em;
	width: 96%;
	list-style: none;
	text-align: center;
height: 400px;
}

/* Common style */
.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 10px 1%;
	
	width: 100%;
	height: auto;
	background: #3085a3;
	text-align: center;
	cursor: pointer;
}

.grid figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
	opacity: 0.8;
}

.grid figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h2 {
	word-spacing: -0.15em;
	font-weight: 300;
}

.grid figure h2 span {
font-size: 2.2vw;
font-family: 'Roboto', sans-serif;
font-weight: 900;
color: #FCDDE7;
text-shadow: 4px 4px 6px #000;
}

.grid figure h2,
.grid figure p {
	margin: 0;
}

.grid figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
font-size: 1.2vw;
font-family: 'Roboto', sans-serif;
font-weight: 900;
text-shadow: 2px 2px 4px #000;
}


/***** Apollo *****/
/*-----------------*/

figure.andrei {
	background: #3498db;
}

figure.andrei img {
	opacity: 0.95;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale3d(1.05,1.05,1);
	transform: scale3d(1.05,1.05,1);
}

figure.andrei figcaption::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.5);
	content: '';
	-webkit-transition: -webkit-transform 0.6s;
	transition: transform 0.6s;
	-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
	transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
}

figure.andrei p {
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 1em;
	padding: 0 1em;
	max-width: 250px;
	border-right: 4px solid #fff;
	text-align: right;
	opacity: 0;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.andrei h2 {
	text-align: left;
}

figure.andrei:hover img {
	opacity: 0.6;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

figure.andrei:hover figcaption::before {
	-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
	transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
}

figure.andrei:hover p {
	opacity: 1;
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}
  • Вопрос задан
  • 2959 просмотров
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
ну так картинка же не занимает всю ширину блока!
20170330-190443.png
Добавьте в файле style2.css в 362 строке
.grid figure img {
  ...
 width: 100%;
}
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
в файле style.css на 899 строке убрать

img {
  width: 330px;
}
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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