Есть таймлайн на сайте, при попытке редактировать текст(уменьшить количество символов), вся верстка едет к чертям. Не понимаю в чем дело CSS:
.roadmap {
position: relative;
display: block;
}
#road_map {
background: #f00;
}
.roadmap_box {
margin-top:120px;
position: relative;
text-align: center;
}
.roadmap.gradient_box {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
}
.roadmap::before {
background-color: #26b6d4;
content: "";
height: 3px;
left: 0;
position: absolute;
top: 15px;
width: 100%;
}
.roadmap_icon {
background-color: rgba(0, 0, 0, 0);
height: 31px;
left: 0;
margin: 0 auto;
overflow: hidden;
position: absolute;
right: 0;
top: -120px;
transform: rotate(-60deg) skewY(30deg);
width: 27px;
}
.roadmap_icon.icon_gradient_box::before {
background: -webkit-linear-gradient(left, rgba(117,88,165,1) 0%,rgba(37,184,213,1) 99%);
background: linear-gradient(to right, rgba(117,88,165,1) 0%,rgba(37,184,213,1) 99%);
}
.roadmap_icon::before {
background-color: #26b6d4;
color: #ffffff;
content: "c";
display: block;
font-size: 28px;
font-weight: 700;
height: inherit;
transform: skewY(-30deg) rotate(60deg) translate(0%);
width: inherit;
}
.rd_complete .roadmap_icon::before {
content: "";
font-family: ionicons;
font-size: 16px;
font-weight: normal;
}
.roadmap_inner::before {
background-color: #26b6d4;
content: "";
height: 94px;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
top: -100px;
width: 3px;
}
.roadmap_inner::after {
background: #26b6d4 none repeat scroll 0 0;
border: 2px solid #ffffff;
border-radius: 100%;
content: "";
height: 15px;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
top: -6px;
width: 15px;
z-index: -1;
}
.roadmap_inner {
background-color: #26b6d4;
border-radius: 10px;
padding:20px;
}
.roadmap_box h6 {
color: #ffffff;
}
.roadmap_box p {
color: #ffffff;
font-size:14px;
line-height:26px;
margin: 0;
}
.roadmap .owl-prev,
.roadmap .owl-next {
position: absolute;
top: 0;
}
.roadmap .owl-prev {
left: -33px;
}
.roadmap .owl-next {
right: -33px;
}
.roadmap .owl-nav i {
background-color: #26b6d4;
border-radius: 100%;
color: #ffffff;
display: block;
font-size: 26px;
height: 33px;
line-height: 37px;
text-align:center;
width: 33px;
}
.roadmap .owl-prev i {
padding-right: 3px;
}
.roadmap .owl-next i {
padding-left: 3px;
}
.roadmap .owl-nav .disabled {
cursor: default;
}
.roadmap .owl-nav .disabled i {
background-color: #1C88BD;
color: #9FB3D7;
}
.timeline_wrap {
margin-top: 20px;
padding-top: 30px;
position: relative;
}
.timeline_wrap::before {
background-color: #ffffff;
bottom: 0;
content: "";
height: 100%;
left: 50%;
position: absolute;
top: 0;
width: 1px;
}
.timeline_block {
display: inline-block;
position: relative;
width:100%;
}
.timeline_icon {
background-color: #ffffff;
border-radius: 100%;
font-size: 12px;
height: 20px;
left: 50%;
line-height: 23px;
position: absolute;
text-align: center;
top: 0;
transform: translateX(-50%);
width: 20px;
}
.timeline_content {
position: relative;
text-align: right;
width: 47%;
}
.timeline_content h6,
.timeline_content p {
color: #ffffff;
}
.tm_date {
color: #46d6ff;
font-weight: 600;
left: 113%;
line-height: normal;
position: absolute;
text-align: left;
top: -3px;
width: 100%;
}
.timeline_block:nth-child(2n) .timeline_content {
float: right;
text-align: left;
}
.timeline_block:nth-child(2n) .tm_date {
left: auto;
right: 113%;
text-align: right;
}
.timeline_icon.tm_complete {
background-color: #73e080;
color: #ffffff;
}
.v_blue .roadmap_inner::before,
.v_blue .roadmap_inner::after,
.v_blue .roadmap::before,
.v_blue .roadmap_inner,
.v_blue .roadmap .owl-nav i {
background-color: #0f3e97;
}
.v_dark .roadmap_inner::before,
.v_dark .roadmap_inner::after,
.v_dark .roadmap::before,
.v_dark .roadmap_inner,
.v_dark .roadmap .owl-nav i,
.v_dark_light .roadmap_inner::before,
.v_dark_light .roadmap_inner::after,
.v_dark_light .roadmap::before,
.v_dark_light .roadmap_inner,
.v_dark_light .roadmap .owl-nav i {
background-color: #1a1c34;
}
.v_dark .roadmap .owl-nav .disabled i,
.v_dark_light .roadmap .owl-nav .disabled i {
color: #999999;
}
<section id="road_map" class="section_gradiant3">
<div class="container">
<div class="row text-center">
<div class="col-lg-8 col-md-12 offset-lg-2">
<div class="title_light">
<h2 class="animation" data-animation="fadeInUp" data-animation-delay="0.2s">Road Map</h2>
<p class="animation" data-animation="fadeInUp" data-animation-delay="0.3s">Cryptominded is a curated directory of the best cryptocurrency resources. We're slowly transforming the website into the best place for beginners to learn about cryptocurrencies</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8 offset-lg-2 col-md-12">
<div class="timeline_wrap">
<div class="timeline_block">
<div class="timeline_icon tm_complete">
<i class="ion-checkmark"></i>
</div>
<div class="timeline_content animation" data-animation="fadeInUp" data-animation-delay="0.3s">
<span class="tm_date">Q1</span>
<h6>February 2018</h6>
<p>Odit, itaque, deserunt corporis vero ipsum nisi eius odio natus ullam provident pariatur temporibus quia eos.</p>
</div>
</div>
<div class="timeline_block">
<div class="timeline_icon tm_complete">
<i class="ion-checkmark"></i>
</div>
<div class="timeline_content animation" data-animation="fadeInUp" data-animation-delay="0.3s">
<span class="tm_date">February 2018</span>
<h6>Exchange BCT to Bitcoin</h6>
<p>Odit, itaque, deserunt corporis vero ipsum nisi eius odio natus ullam provident pariatur temporibus quia eos.</p>
</div>
</div>
<div class="timeline_block">
<div class="timeline_icon">
</div>
<div class="timeline_content animation" data-animation="fadeInUp" data-animation-delay="0.3s">
<span class="tm_date">March 2018</span>
<h6>BCT mode of payment in Crypto</h6>
<p>Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde.</p>
</div>
</div>
<div class="timeline_block">
<div class="timeline_icon">
</div>
<div class="timeline_content animation" data-animation="fadeInUp" data-animation-delay="0.3s">
<span class="tm_date">June 2018</span>
<h6>Send-Receive coin mobile</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quas.</p>
</div>
</div>
<div class="timeline_block">
<div class="timeline_icon">
</div>
<div class="timeline_content animation" data-animation="fadeInUp" data-animation-delay="0.3s">
<span class="tm_date">December 2018</span>
<h6>Deposit Bitcoin from your account</h6>
<p>Odit, itaque, deserunt corporis vero ipsum nisi eius odio natus ullam provident pariatur temporibus quia eos.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Вот как выглядит сейчас
Вот как выглядит, если напротив Q1 сверху вставить Establish first Crypto-Mine и убрать текст Odit, itaque, deserunt corporis vero ipsum nisi eius odio natus ullam provident pariatur temporibus quia eos.
возможно потому что блок .timeline_block имеет display:inline-block; т.е. размер зависит от содержимого.
.timeline_block {
display: inline-block;
position: relative;
}
добавьте ему ширину width: 100%
Виртуальный выделенный сервер (VDS) становится отличным выбором
Пару раз сталкивался с сайтами, на которых нельзя посмотреть стили страницы, те допустим я сижу с хрома, и кликая правой кнопкой мыши - ноль...
Я через сервлет вывожу информацию из MySQL в виде таблицы (name и surname)Он работает правильно, но когда выводится таблица он без линии между ячейками
Просьба объяснить и дать совет как исправить поведение элементов разметки
Есть база на SQLite, в ней таблица с двумя колонками Id и NameС помощью Entity я подвязал её к коду и пытаюсь запихнуть в MVVM