Add spacing between upcoming and past events

Hi,
I applied this code in the css code place of my calendar widget but I didn’t see any difference. Sure, I made an error.
Any help is welcome :grin:

1 Like

This code for Squarespace Event Page. If you use Elfsight Calendar Widget, it won’t work. You can share link to page where you use Calendar, I will check and give you new code.

1 Like

Hi @MICHEL_A3A :wave:

Do I understand right that you just would like to increase spacing here?

1 Like

Hi Max,
Yes if possible, even better if we can insert a sort of border line.
Thanks for your help.
Kind regards

Visitez notre site : https://amicale3a.fr

1 Like

Gotcha!

Your request is in the hands of our devs now. I’ll let you know once I receive a response from them :slightly_smiling_face:

@MICHEL_A3A This code should work for you:

.global-styles,
:root {
  --line-color: #000;
  --line-opacity: 0.2;
  --space: 70px;
}

.eapp-events-calendar-layout-pastEvents {
  margin-top: var(--space);
  position: relative;
}

.eapp-events-calendar-layout-pastEvents:before {
  content:  '';
  width: 100%;
  height: 3px;
  position: absolute;
  top: calc(var(--space) / -2.2);
  left: 0;  
  background: var(--line-color);
  opacity: var(--line-opacity);
  border-radius: 5px;
}

You can adjust line color, opacity and space to your liking. Test it out and let me know if you like what you see :slightly_smiling_face:

Dear Max,
As usual, it’s perfect, I like it.
Thank you very much.
Kind regards
Michel

2 Likes

You are always very welcome!

In the meantime, we’d like to invite you to participate in our new challenge. Just answer 3 simple questions about your favorite widget, and you’ll get a chance to win a 3-month extension to any of your subscriptions.

Check the details and jump in - we are eager to hear your thoughts :wink:

A post was merged into an existing topic: May Challenge: Tell us about your fav widget and get rewarded! :trophy: