Проблема с оранжевым подчеркиванием заключается в его абсолютном позиционировании.Похоже, вы пытаетесь отцентрировать его по горизонтали.Чтобы сделать это с абсолютно позиционированным элементом, вы должны установить для его margin значение auto, а для его left и right - 0;
.underline {
margin: auto;
position: absolute;
left: 0;
right: 0;
bottom: -120px;
background-color: orange;
width: 0;
height: 3px;
border-radius: 1.5px;
animation-duration: 0.7s;
animation-fill-mode: forwards;
transition-timing-function: ease-out;
}
@keyframes line {
from {width: 0px;}
to {width: 210px;}
}
Серая рамка сложнее исправить.Похоже, вы хотите, чтобы абзац отображался в столбце слева, а ползунок изображения в столбце справа.Это усложняется левой и правой кнопками элемента слайдера изображения.
Чтобы исправить левую и правую кнопки слайдера изображения, сначала поместите их внутри элемента слайдера изображения.
<div class="image-slider">
<i class="fas fa-caret-down left"></i>
<i class="fas fa-caret-down right"></i>
</div>
Затем сделайте их положение абсолютным и разместите их в правильных положениях относительно элемента ползунка изображения.
.fa-caret-down {
position: absolute;
width: 50px;
height: 50px;
font-size: 60px;
color: lightgrey;
top: 50%;
margin-top: -25px;
transform: rotate(-90deg);
transition: all 0.5s ease;
}
.right {
right: -50px;
transform: rotate(-90deg);
}
.left {
left: -50px;
transform: rotate(90deg);
}
Теперь вы хотите отобразить элемент абзаца и ползунок изображения рядом друг с другом.Однако, если вы просматриваете это на маленьком экране, они могут быть слишком тесными рядом друг с другом, поэтому вы хотите, чтобы они плавно переместились на один выше и один ниже, когда ширина окна меньше определенного размера.
Естьмножество способов отображения CSS-столбцов;в этом примере я буду отображать их как встроенные блоки с фиксированным минимальным размером абзаца.Установите для ползунка изображения значение display:inline-block, задайте для него горизонтальное поле, достаточное для кнопок влево и вправо, и удалите атрибуты right и bottom.
.image-slider {
display: inline-block;
margin: 0 80px;
vertical-align: top;
background-color: darkgrey;
position: relative;
width: 440px;
height: 350px;
}
Чтобы нацелить абзац, используйтеCSS-селектор и установите его на display:inline-block и минимальную ширину любой ширины, которую вы хотите, прежде чем он переместится на слайдер изображения под ним.Дайте ему ширину в процентах.Вам также необходимо настроить отступы раздела о нас, чтобы желтая диагональ не перекрывала текст.
.about-us p {
display: inline-block;
width: 50%;
text-align: left;
min-width: 440px;
vertical-align: top;
}
Кодовое перо с указанными выше изменениями находится в https://codepen.io/jla-/pen/QZjpMW. Тамбыло реализовано множество других мелких исправлений, чтобы сделать это гладко.Надеюсь, это поможет.