Adjust padding top and bottom for The Events Calendar Pages?

This topic has 9 replies, 5 voices, and was last updated 3 years, 3 months ago by Ying.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
March 13, 2022 at 8:45 pm #2153456

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.

March 13, 2022 at 9:07 pm #2153470

Fernando
Customer Support

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. 🙂

March 14, 2022 at 2:41 am #2153670
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;
}
```
March 14, 2022 at 6:19 am #2153929
David
Staff
Customer Support
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
March 14, 2022 at 3:37 pm #2154625

Vic

Thankyou so much David – that is perfect.

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

March 15, 2022 at 3:47 am #2155091

David
Staff
Customer Support

Glad to be of help!

March 11, 2023 at 12:40 pm #2564316

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/

March 11, 2023 at 1:03 pm #2564341
Ying
Staff
Customer Support
Hi Wes,

Try this for the single event:
```
.single-tribe_events main#tribe-events {
    padding-top: 0 !important;
}
```
March 11, 2023 at 1:27 pm #2564362

Wes

Massive thanks Ying, that did the trick.

March 12, 2023 at 10:33 am #2565113

Ying
Staff
Customer Support

You are welcome 🙂
Author

Posts