Bug Timeline

[Maxx]

Hello,

As you can see to the homepage
https://www.good-idea-website.com/

I make a screen to a better undestanding
https://www.good-idea-website.com/wp-content/uploads/2020/09/Bug-timeline.jpg

On computer or smartphone, it is not center.

How to able to center ?

Thanks

[Design Themes !!!]

Hi.,

Get into Admin Panel > Appearance > Customize > Additional CSS > Pasted the below css code inside the text area > Save All.

.dt-sc-hr-timeline-section.type2.custom-style .dt-sc-hr-timeline-content .dt-sc-hr-timeline-thumb span:after {height: 50%; }
.dt-sc-hr-timeline-section.type2.custom-style .dt-sc-hr-timeline-thumb:before {transform: translateY(60px); }
.dt-sc-hr-timeline-section.type2.custom-style .dt-sc-hr-timeline.bottom .dt-sc-hr-timeline-thumb:before {transform: translateY(-70px); }
@media only screen and (min-width:1381px) and (max-width:1599px) { .dt-sc-hr-timeline-section.type2.custom-style .dt-sc-hr-timeline-thumb:before {transform: translateY(90px); } }
@media only screen and (min-width:1201px) and (max-width:1380px) { .dt-sc-hr-timeline-section.type2.custom-style .dt-sc-hr-timeline-thumb:before {transform: translateY(78px); } .dt-sc-hr-timeline-section.type2.custom-style .dt-sc-hr-timeline-content p {padding: 0 20px; } .dt-sc-hr-timeline-section.type2.custom-style .dt-sc-hr-timeline.bottom .dt-sc-hr-timeline-thumb:before {transform: translateY(-55px); } }
@media only screen and (min-width:992px) and (max-width:1200px) { .dt-sc-hr-timeline-section.type2.custom-style .dt-sc-hr-timeline-thumb:before {transform: translateY(78px); } .dt-sc-hr-timeline-section.type2.custom-style .dt-sc-hr-timeline-content p {padding: 0 10px; } .dt-sc-hr-timeline-section.type2.custom-style .dt-sc-hr-timeline.bottom .dt-sc-hr-timeline-thumb:before {transform: translateY(-55px); } }
@media only screen and (min-width:768px) and (max-width:991px) {.dt-sc-hr-timeline-section.type2.custom-style .dt-sc-hr-timeline-thumb:before {transform: translateY(40px); } .dt-sc-hr-timeline-section.type2.custom-style .dt-sc-hr-timeline-content p {padding: 0 10px; } .dt-sc-hr-timeline-section.type2.custom-style .dt-sc-hr-timeline.bottom .dt-sc-hr-timeline-thumb:before {transform: translateY(-50px); } }
@media only screen and (max-width: 767px) {.dt-sc-hr-timeline-section.type2 .dt-sc-hr-timeline-content h3::after {top: -8px; } .dt-sc-hr-timeline-section.type2 .dt-sc-hr-timeline.bottom .dt-sc-hr-timeline-content p::after {bottom: -10px; } }

Note: If you still have any issues, kindly send us some screenshot/video where you have the issue. So that we will check the issue.

[Maxx]

Hello,

Thanks, it is much more better, perfect on computer.
Except on smartphone
http://www.responsinator.com/?url=http%3A%2F%2Fgood-idea-website.com%2F

[Design Themes !!!]

Kindly replace the the following style, by removing the last line as we sent to add in your custom CSS section.

@media only screen and (max-width: 767px) {.dt-sc-hr-timeline-section.type2 .dt-sc-hr-timeline-content h3::after {top: -8px; } .dt-sc-hr-timeline-section.type2 .dt-sc-hr-timeline.bottom .dt-sc-hr-timeline-content p::after {bottom: -25px; } }

Note: If you found this helpful and like our support means, please feel free to give us your best rating (5/5 stars), which will be helpful for us to keep supporting you all, even better 🙂