Элемент не отображается как блок

113
12

У меня есть 3 ящика, которые в обычном виде на рабочем столе отображаются встроенным способом. Моя проблема заключается в том, что в окне просмотра 640 или меньше я не могу получить следующие поля display: block; , Я попытался поставить display: block в классе .box и отдельные идентификаторы цвета. Что происходит, ящики перекрываются и лежат друг на друге.

Кто-нибудь видит, что я делаю неправильно в своей попытке?

<section id="info">
<article>
<a href="projects"><div id="green" class="box">
<div class="info-box-title">PROJECTS</div>
<div class="info-box-description">Over 60 years of accumulated projects.</div>
</div></a>
<a href="about"><div id="yellow" class="box">
<div class="info-box-title">ABOUT US</div>
<div class="info-box-description">Find out about - The Eslich Wrecking Company.</div>
</div></a>
<a href="contact"><div id="red" class="box">
<div class="info-box-title">CONTACT US</div>
<div class="info-box-description">Contact us for more information.</div>
</div></a>
</article>
</section>

По умолчанию CSS

#info {
max-width: 80%;
height: auto;
padding: 100px 10%;
margin: 100px 10%;
}
.box {
width: 20%;
height: 300px;
opacity:0;
position: absolute;
line-height: 1.5em;
}
#green, #yellow, #red {
box-shadow: inset 0 0 0 0;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
transition: all ease 0.3s;
}
#green {
background: #3e745b;
left: 15%;

}
#yellow {
background: #6f9697;/*#f3db6d*/
left: 40%;
}
#red {
background: #3e745b;
left: 65%;
}
#green:hover, #yellow:hover, #red:hover {
/*box-shadow: inset 0 300px 0 0 #6f9697;*/
box-shadow: inset 0 300px 0 0 #303030;
}
#green.green{animation:slideinGreen .5s ease}
#yellow.yellow{animation:slideinYellow 1.3s ease}
#red.red{animation:slideinRed 2s ease}
#green.active,#red.active,#yellow.active{opacity: 1}
@keyframes slideinGreen {
from {
left: calc(25% - 250px);opacity:0;
}
}
@keyframes slideinYellow{
from {
left: calc(45% - 350px);opacity:0;
}
}
@keyframes slideinRed {
from {
left: calc(65% - 450px);opacity:0;
}
}

Медиа-запрос 640px или меньше

/*---Fade In Boxes---*/
#info {
max-width: 100%;
height: auto;
padding: 100px 0%;
margin: 0;
}
.box {
width: 100%;
height: 200px;
position: absolute;
line-height: 1.5em;
display: block;
}
#green {
left: 0%;
}
#yellow {
left: 0%;
}
#red {
left: 0%;
}

спросил(а) 2016-05-26T16:33:00+03:00 4 года, 9 месяцев назад
1
Решение
61

Проблема с абсолютным позиционированием в классе ящиков. Из-за этого элементы перекрываются друг с другом.

ответил(а) 2016-05-26T16:39:00+03:00 4 года, 9 месяцев назад
43

Изменить положение .box в относительном:

@media screen and (max-width: 640px) {
.box {
width: 100%;
height: 200px;
position: relative;
line-height: 1.5em;
display: block;

}


Потому что #home-info-container имеет padding: 100px 15%, 3 коробки могут быть полной ширины. Если вы хотите иметь полный комплект для 3-х ящиков и сохраняйте описание:

 @media screen and (max-width: 640px) {
#home-info-container {
padding-left: 0;
padding-right: 0;
}

#home-info-container-description {
padding-left: 15%;
padding-right: 15%;
}
}

ответил(а) 2016-05-26T16:46:00+03:00 4 года, 9 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема