Съезжает верстка

123
11 ноября 2019, 10:10

Есть таймлайн на сайте, при попытке редактировать текст(уменьшить количество символов), вся верстка едет к чертям. Не понимаю в чем дело 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.

Answer 1

возможно потому что блок .timeline_block имеет display:inline-block; т.е. размер зависит от содержимого.

.timeline_block {
    display: inline-block;
    position: relative;
}

добавьте ему ширину width: 100%

READ ALSO
Не удается посмотреть стили

Не удается посмотреть стили

Пару раз сталкивался с сайтами, на которых нельзя посмотреть стили страницы, те допустим я сижу с хрома, и кликая правой кнопкой мыши - ноль...

119
Как правильно вывести таблицу

Как правильно вывести таблицу

Я через сервлет вывожу информацию из MySQL в виде таблицы (name и surname)Он работает правильно, но когда выводится таблица он без линии между ячейками

126
Видимость элементов после 3d-поворота

Видимость элементов после 3d-поворота

Просьба объяснить и дать совет как исправить поведение элементов разметки

143
Ошибка SQL logic error no such column: Extent1.(column)

Ошибка SQL logic error no such column: Extent1.(column)

Есть база на SQLite, в ней таблица с двумя колонками Id и NameС помощью Entity я подвязал её к коду и пытаюсь запихнуть в MVVM

145