[Resolved] Adjust padding top and bottom for The Events Calendar Pages?

[Vic]

Sorry. Thought I should be able to easily work this out. Found several custom css suggestions. But they have had no effect?

I would like to be able to adjust the padding top and bottom of The Events Calendar list of Events page and single Events pages.
That is the white space under the header background image.
And above the footer.

Thankyou.

[Fernando]

Hi Vic,

The padding of the Site content can be modified through Appearance > Customize > Layout > Container: https://share.getcloudapp.com/xQuqZ71d

The other spacing from the link you sent, however, is coming from The Events Calendar plugin. It would be best to alter the spacing coming from this plugin through its settings if possible.

With that said, may you kindly try to reach out the Support of this plugin if they may assist you with regards to this? Otherwise, we’ll gladly provide CSS to overwrite the padding being set by this plugin. However, it would be best to try altering it through the plugin first before we go through with extra code.

Hope this clarifies. 🙂

[Vic]

Thankyou Fernando,

(and I forgot to say the most important bit…yes…if you could please provide some customer css that will do what I need…it would be very much appreciated)

The Layout \ Container setting changes did not have any effect on The Event Calendar pages.
But they would be global across all pages anyway?
And I am happy with the padding of my non Event Calendar pages;
https://www.gqc.org.au/

Unfortunately at this stage I am only using the free version of the The Event Calendar plugin.
There are no plugin settings which allow for padding adjustment.
Usually their forum responses regarding padding are to consult with your Theme’s support 🙁

I have found several forum responses with custom css padding adjustment suggestions.
However I have been unable to achieve any adjustment.
Unfortunately my CSS knowledge is just not good enough to work it out for myself.
There are 2 main styles;
– the single event page
https://www.gqc.org.au/event/deming-a-system-of-profound-knowledge-with-dr-jackie-graham/
– and the multiple events pages of various types
https://www.gqc.org.au/events/list/
https://www.gqc.org.au/events/list/?eventDisplay=past
https://www.gqc.org.au/events/category/events/
https://www.gqc.org.au/events/month/

It is this white area that is too large underneath the header background.
(I would also like to reduce the area at the bottom above the footer)

It’s as if all their suggestions are irrelevant to the GeneratePress theme?
Is this even possible?
Or am I just doing something fundamentally wrong?
Here is some of the custom CSS I have tried so far;

#tribe-events-pg-template {
padding-top: -200px;
}

.events-archive #tribe-events-pg-template {
padding-top: -200px;
}

#tribe-events-content {
margin: 2.5rem;
}

#tribe-events-content {
    padding-top: -200px !important;
}

.template-event-page {
margin-top: 50px !important; /* or whatever value you'd like */
}

.template-event-page,
.single single-tribe_events .html_minimal_header #main > .avia-builder-el-0, .av_minimal_header + #main .container_wrap_first {
margin-top: 50px !important; /* or whatever value you'd like */
}

.single-tribe_events #main .post-content {
margin-top: -92px;
}

[David]

Hi there,

theres two parts to the spacing:

1. GeneratePress – Customizer > Layout > Container –> Padding. Here we define what GP outputs.
I suggest you adjust the Top and Bottom to 40px or there are abouts.
As in the next step will remove the other padding.

2. Tribe Events – Its padding comes from many different sources for different templates and screen sizes.
Add this CSS to remove their top and bottom padding:

#tribe-events-pg-template,
.tribe-events .tribe-events-l-container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

Or you may want to ask Tribe if they have a filter to set the top / bottom padding of their containers to 0

[Vic]

Thankyou so much David – that is perfect.

If only I can get to the stage of working these things out for myself.

[David]

Glad to be of help!

[Wes]

David’s CSS worked perfectly for my event archive page. Is their similar CSS that would do the same for the events pages themselves?

The CSS above worked to remove padding on this page: https://ardmore.ws/events/

Is there something similar that would do it for this page: https://ardmore.ws/event/spring-plant-swap-2023/

[Ying]

Hi Wes,

Try this for the single event:

.single-tribe_events main#tribe-events {
    padding-top: 0 !important;
}

[Wes]

Massive thanks Ying, that did the trick.

[Ying]

You are welcome 🙂

[Author]

Posts