Items on both sides

Hi @portpass1974,

Thanks for using Bold Timeline Lite plugin! ??

Can you please send us link with mentioned Timeline so that we could have a closer look?
Thanks in advance.

Hi. The timeline is at https://seanc82.sg-host.com/about/history/ (just scroll down a bit).

Hi,

Thanks for sending us page link with BoldTimeline, it helped ??

Please, use the following code and add as Custom CSS:

.bold_timeline_container_line_position_center.bold_timeline_container.bold_timeline_container_item_connection_type_line .bold_timeline_item_override_connection_type_inherit.bold_timeline_item:nth-child(odd) .bold_timeline_item_connection {
    right: 100% !important;
    left: calc(-2.5rem) !important;
}
.bold_timeline_container_line_position_center.bold_timeline_container.bold_timeline_container_item_marker_type_dot .bold_timeline_item_override_marker_type_inherit.bold_timeline_item:nth-child(odd) .bold_timeline_item_marker {
	right: auto !important;
    left: calc(-2.5rem - 8px) !important;
}
.bold_timeline_group:nth-child(even) .bold_timeline_group_content .bold_timeline_item .bold_timeline_item_icon {
    right: auto !important;
    left: calc(-5.5rem) !important;
}
.bold_timeline_group:nth-child(even) .bold_timeline_group_content .bold_timeline_item {
    margin-right: 0 !important;
    margin-left: calc(50% + 2.5rem) !important;
}
.bold_timeline_group:nth-child(even) .bold_timeline_group_content .bold_timeline_item .bold_timeline_item_icon {
    right: auto !important;
    left: calc(-2.5rem) !important;
}

Hi. Thanks so much for this. This is great. Just three things:

1. Is this CSS code loaded by the server on just the page at https://seanc82.sg-host.com/about/history/, or on every page of the website? I’m only asking since I want to keep the code as light as possible.

2. I noticed that for those events on the right side, the logo is kind of off center, and the dot is in the middle, instead of the far right (for left side events, it’s the opposite). It’s a minor issue, but just wondering if this could be fixed.

3. Also, is there a way to make the timeline “tighter,” with the years on both left and right close together vertically (just to save space).

Thanks so much again. Great plugin.

• This reply was modified 3 years, 3 months ago by portpass1974.

Hi. Me again. I noticed as well that the events on the right side are “smushed” vertically when seeing the timeline on mobile. Is there a way to fix this? Thanks.

Hi,

Please read the answers below:

1. It depends where you have added Custom CSS.
2, 3 & 4. It could be fixed with some additional CSS codes, which we suggest you to customize according to your needs.

Cheers, BT ??

Hi, I added the code to the CSS section of my premium theme, but I believe that’s the only place to put it. Is there additional code that could be added to that the events on the right side aren’t smushed.

For now, I’ve removed the code to just have everything on the left.

Hi, please use another third party plugin for Custom CSS in order to use the same code for several Timelines.

• This reply was modified 3 years, 3 months ago by boldthemes.

I tried to put the code in the CSS box right on the page, but that still created the same problem. It looks fine on a screen, just not on a mobile or smaller device. Is there any fix to this?

Hi,

Please try adding !important in CSS lines, example: .class { color: red !important;}

Regarding mobile, probably Timeline on mobile needs additional CSS.

Actually, the !important lines were already added to the code listed above.

Do you have additional CSS for the mobile that you can send me? Thanks so much.

Hi,

Unfortunately, we are not able to provide customization per request, so please use the inspect tool on your Browser to customize the Timeline on your site. In order to change items position on mobile, please use @media (max-width: 780px) code (change device size in px according to your needs). Thanks for understanding! ?? BT team