Приветствую. Помогите пожалуйста. В браузере Mozilla Firefox некорректно отображаются отступы. Chrome, Opera, Yandex нормально отображают, а тут не очень правильно.
Вендорные префиксы пробовал, не помогло. Пробовал найти ошибку в инспекторе элементов, но не помогло тоже.
Текст не важен, по этому немного его изменил. Проблема в том, что с Mozilla нижняя строка плывет:
.block2,
.block3 {
align-items: center;
display: flex;
flex-direction: row;
font-weight: 300;
height: 100vh;
justify-content: center;
line-height: 1.7;
}
.block2-all-wrap {
align-items: flex-start;
justify-content: center;
display: flex;
width: 100%;
}
.block2-col-left,
.block2-col-right {
display: flex;
flex-direction: column;
justify-content: center;
padding: 2.5%;
padding-bottom: 2%;
padding-top: 2%;
width: 50%;
}
.block2-left-wrap,
.block2-right-wrap {
align-items: center;
display: flex;
border: 4px solid transparent;
border-radius: 16px;
background: #fff;
background-clip: padding-box;
flex-direction: column;
justify-content: center;
position: relative;
padding-left: -2.5%;
padding-right: -2.5%;
padding-bottom: 0;
}
.block2-left-wrap::after,
.block2-right-wrap::after {
background: linear-gradient(to top right, #71069E, #3B52B8, #00A2D4);
border-radius: 16px;
bottom: -4px;
content: '';
left: -4px;
position: absolute;
right: -4px;
top: -4px;
z-index: -1;
}
.block2-left-wrap:hover::after,
.block2-right-wrap:hover::after {
//background: linear-gradient(135deg, red 20%, blue 70%);
}
.block2-left-wrap {
margin-right: -2.5%;
}
.block2-right-wrap {
margin-left: -2.5%;
}
.block2-col-left-ico,
.block2-col-right-ico,
.block3-col-left-ico,
.block3-col-center-ico,
.block3-col-right-ico {
font-size: 600%;
padding-top: 5%;
text-align: center;
}
.block2-col-left-ico-text,
.block2-col-right-ico-text {
display: flex;
font-size: 200%;
justify-content: center;
}
.block2-col-left-text,
.block2-col-right-text {
color: rgba(0, 0, 0, 0.8);
padding: 5%;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Rubik:300,500" rel="stylesheet">
<script src="https://use.fontawesome.com/98212653bc.js"></script>
</head>
<body>
<div class="block2">
<div class="block2-all-wrap">
<div class="block2-col-left wow slideInLeft animated" data-wow-offset="200">
<div class="block2-left-wrap">
<div class="block2-col-left-ico">
<i class="fa fa-history" aria-hidden="true"></i>
</div>
<div class="block2-col-left-ico-text">
Історія
</div>
<div class="block2-col-left-text">
13букв1234567 college як будівельний технікум створений відповідно до постанови Ради Міністрів УРСР №<span class="bold">679</span> від <span class="bold">20.06.1967</span> на базі сільськогосподарського технікуму, який готував фахівців для сільського
господарства з <span class="bold">1927</span> року. <br><br> Згідно з наказом Державного агропромислового комітету УРСР від <span class="bold">19.12.1990</span> №<span class="bold">249</span> 13букв1234567 будівельний college реорганізований
у 13букв1234567 будівельно-економічний college. <br><br> Відповідно до наказу Міністерства аграрної політики України від <span class="bold">11.11.2005</span> №<span class="bold">626</span> college реорганізовано у 13букв1234567 будівельно-економічний
коледж teststsr державного аграрного університету.
</div>
</div>
</div>
<div class="block2-col-right wow slideInRight animated" data-wow-offset="200">
<div class="block2-right-wrap">
<div class="block2-col-right-ico">
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
</div>
<div class="block2-col-right-ico-text">
Профіль
</div>
<div class="block2-col-right-text">
До <span class="bold">1981</span> року в будівельному технікумі велась підготовка фахівців лише будівельного напрямку. З <span class="bold">1981</span> року в 13букв1234567 розпочалась підготовка фахівців економічного спрямування – бухгалтерів
та плановиків для системи Мінсільбуду України, з <span class="bold">1998</span> року – програмістів, з <span class="bold">2003</span> року – фінансистів, а з <span class="bold">2012</span> року - менеджерів. <br> У <span class="bold">1991</span> році одним із перших на Україні технікум пройшов відповідну перевірку інспекції Міносвіти України і отримав статус закладу II рівня акредитації – коледж, який потім підтвердився ліцензуванням та акредитацією відповідних спеціальностей. В даний
час підготовка фахівців в коледжі здійснюється за I освітньо-кваліфікаційним рівнем згідно ліцензії Міністерства освіти і науки, молоді та спорту України серія АЕ №<span class="bold">636471</span> видана <span class="bold">10.06.2015</span> року з шести спеціальностей.
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</body>
</html>
Если в block2-col-left-text padding сделать 0, то текст вместится в блок, но выглядеть потом будет ужасно.
Решение немного корявое, но зато быстрое)
Добавьте в css:
@-moz-document url-prefix(){
.block2-col-left-text,
.block2-col-right-text{
margin-bottom: 40px;
}
}
И регулируйте отступ как угодно.
Виртуальный выделенный сервер (VDS) становится отличным выбором
Только изучаю библиотеку: просто взял код компонента Dropdown menu и хотел поэкспериментировать
Подскажите, как менять textarea для того, чтоб он имел следующий вид как на картинке
Привет всем, не могу сделать разбиение строки на подстроки с помощью регулярных выражений, как это требуетсяНужно разбить строку на подстроки...