Center the timeline carousel

Ask the Community Customization
1

Thanks for the reply, Helga! The developer we work with centered the timeline widget, but as I said in my original post, the functionality of the widget got thrown off, especially in how it responded to different devices/screen sizes. Here is the page where it currently exists: New Essential Experiences | GAR Foundation

3 Likes
3

Hi there, @user27891 :waving_hand:

Unfortunately, I couldn’t find your custom solution since there are no codes in the Custom CSS and Custom JS section of your widget’s settings. However, the code below should work great for this case:

.es-snap-carousel-container{
justify-content: center!important;
}

Please remove the code you’ve used and add the new one to the Custom CSS field on the Settings tab of your widget’s settings. Try it out and let me know if it helped :slightly_smiling_face:

3 Likes
4

Hi Max,

Thanks for your feedback. Unfortunately, I am still experiencing the same glitches when I apply the code you shared. For example, when I’m on a mobile device or my desktop screen is not at full width, the carousel doesn’t show the first item on the timeline (Planning / Pilot). Instead, Phase 1 will be the first item a viewer sees. The line at the bottom that connections the event marker dots doesn’t fully extend to the last event when on a full screen on a desktop.

I have tested this in both Chrome and Safari (on a desktop and mobile) and am experiencing the same issues.

2 Likes
5

Ah, I see!

I’ve shared your request with the dev team and will get back to you romorrow :slightly_smiling_face:

1 Like
6

Thanks for your help!

3 Likes
7

Hi there, @user27891 :waving_hand:

Please try to use this code instead and let me know if it worked:

@media (max-width: 480px) {
  .es-carousel-container,
  .es-carousel-wrapper,
  .es-snap-carousel-wrapper {
    width: fit-content;
    max-width: 100%;
  }
  
  
  .es-widget-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .es-carousel-container {
    margin-left: 0 !important;
  }
}
3 Likes
8

Hi Max,

This fixed all of the functionality issues with the widget (thank you!), but it doesn’t center the full block in a full desktop view. Attached is what I see.

Screenshot 2025-08-19 at 8.19.33 AM
Screenshot 2025-08-19 at 8.19.33 AM1920×902 153 KB

3 Likes
9

Ah, I see! We’ve changed max-width in the 1st line with the min-width and now everything should be fine. Could you please check it again?

2 Likes
11

That worked! Thank you so much for your help in resolving this issue. We love the carousel timeline feature and are glad it’s fully functional in a centered position. I appreciate your assistance!

4 Likes
12

Oh, thanks a bunch for your kind feedback - really happy to know everything is fine now!

In the meantime, we’d like to invite you to participate in our August Contest, where you can win a 6-month extension for your subscription - August Contest: Celebrate 100K Users with us and win 6 FREE Months! 🎁

Check the details and join in :wink:

2 Likes
13

I’m supporting you.

2 Likes