Short distance between items in Timeline - Forum | JoomShaper
Solved SP Page Builder Joomla 6 v6.10.0 PRO

Short distance between items in Timeline

Asked by clausjepsen 1 day ago Last activity 21 hours ago

I have removed the padding-bottom: 30px using CSS (see below) in the Timeline add-on.
I would like to limit the space between the items to make the timeline shorter/more condenced on screen, but I cannot identify which CSS rule to change.

.sppb-addon-timeline .sppb-addon-timeline-wrapper .timeline-movement .timeline-item .timeline-panel {
text-align: initial;
padding: 20px;
border: solid 0px ;
border-radius: 0px;
position: relative;
width: 110px;
margin-left: 15px;
}

.sppb-addon-timeline .sppb-addon-timeline-wrapper .timeline-movement
Specificity: (0,3,0)
{
position: relative;
padding-top: 0;
padding-bottom: -30px important!;
}
*,

Accepted answer

Marked as the solution
Mehtaz Afsana Borsha Staff

Hi,

You can use this CSS in your custom.css file

.sppb-addon-timeline .sppb-addon-timeline-wrapper .timeline-movement { position: relative; padding-top: 0; padding-bottom: 0px !important; }

3 more replies

Mehtaz Afsana Borsha Staff

Hi,

Thanks for contacting us. Could you please share your site URL and a screenshot of the issue? So that I can check.

-Regards.

clausjepsen Asked this

Hi,
that didn't really work, but it inspired me - so I got it to work this way:

.sppb-addon-timeline .sppb-addon-timeline-wrapper .timeline-movement {
position: relative;
padding-top: 0px !important;
padding-bottom: 0px !important;
}

.sppb-addon-timeline .sppb-addon-timeline-wrapper .timeline-movement .timeline-item .timeline-panel {
padding: 0px;
border: solid 0px ;
border-radius: 0px;
width: 110px;
margin-left: 15px;
}

.sppb-addon-timeline .sppb-addon-timeline-wrapper .timeline-badge {
height: 5px Important!;
}

.sppb-addon-timeline .sppb-addon-timeline-wrapper .timeline-movement .timeline-item .timeline-date {
line-height: 5px Important!;
}

Log in to reply.