Events calendar padding

[Pim]

Hi,

The automatic generated page with the events overview (/events) goes below my menu. Is there a way to increase the top padding on the page?

Thanks!
Pim

[Geoff]

Hi Pim,

Thanks for getting in touch!

I’d be happy to help you here but do you have a link where I can see your calendar? That will help me see the layout issue and recommend some code to fix it up. I tried visiting the URL associated with your account, but it redirected me elsewhere and I was unable to access the calendar.

Thanks so much!
Geoff

[Pim]

This reply is private.

[Geoff]

Hey Pim,

Try adding this to either your style.css file or on the Appearance > Customize > Additional CSS screen:

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

That seemed to do the trick when I tested it on your site (screenshot). Hopefully it works for you as well!

Cheers,
Geoff

[Pim]

Hi Goeff,

Thanks for the tip! On individual pages it did not seem to work… For
example: http://easyflexunderconstruction.nl/event/easy-start-2017-03-16/

I also have a question regarding the event lists. Is it possible to show
how many spots/seats are left available? That would be really helpful for
our clients!

Thanks again

[Geoff]

Hi Pim,

Yeah, the CSS I provided was only meant to target the main calendar because you had mentioned the issue was on your /events page. You can change it to target any calendar page or post like this:

.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 */
}

It’s worth noting that the theme’s navigation and header styles are ultimately what are causing the overlap. It’s hard for me to test for sure whether that code above works, but here’s a screenshot of what I was able to see. Hopefully it does the trick but, if not, I would suggest reaching out to the theme developer for further guidance on which classes to target with CSS.

I also have a question regarding the event lists. Is it possible to show
how many spots/seats are left available?

Are you selling tickets for your events? If so, then we have a free plugin for RSVPs called Event Tickets that will show how how many spots are left in an event and an upgraded version called Event Tickets Plus that will allow you to sell paid tickets for events and also show how many seats are left.

If you’re using another plugin or service to reserve seats, then you may need to customize the calendar or its templates to integrate the two.

Let me know if you have any other questions about the styling issue you originally raised and I would be happy to help as best I can. 🙂

Cheers!
Geoff

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts