Allow full width template but boxed contents

[Dennis]

Hi there, many of my sites pages have a top banner stretching full width. If I choose this page template from the events calendar settings page, then the top banner stretches nicely. However, the calendar page contents also stretches full width and that’s not want I want. I want this to be kept in the boxed width. Is there a way to achieve this?

[Cliff]

Hi Dennis.

We do not provide theme styling support, but we may be able to give some quick help if you provide a link to your Events page and a non-Events page that has the full width top banner layout.

[Dennis]

Hi Cliff,
Awesome:

Non-events page: https://thehighfivecompany.com/en/discover/resellers/
Events page: https://thehighfivecompany.com/en/events/

Basically, the banner should stretch full width, the body (with the events calendar contents) should be wrapped in:
[row]
[col span=”1/1″]

** Events calendar body **

[/col]
[/row]

[Cliff]

Dennis, please try adding this custom CSS:

body.post-type-archive-tribe_events #tribe-events-pg-template {
max-width: 100%;
}
body.post-type-archive-tribe_events #tribe-events-content-wrapper {
max-width: 1000px;
margin: 0 auto;
}

Let me know how it goes for you.

[Dennis]

Hi Cliff,

Works like a charm! Awesome, many thanks for your help!

Regards, Dennis

[Dennis]

Hi Cliff,

I was too quick… the events page is now okay, but the single event page not. How do I alter the custom CSS to accommodate the single events pages also to be the same?

Many thanks in advance!

[Cliff]

Please replace what you had with this:

body.post-type-archive-tribe_events #tribe-events-pg-template,
body.single-tribe_events #tribe-events-pg-template {
max-width: 100%;
}
body.post-type-archive-tribe_events #tribe-events-content-wrapper,
body.single-tribe_events #tribe-events-content {
max-width: 1000px;
margin: 0 auto;
}

[Dennis]

Perfect! Thanks Cliff!

[Cliff]

You bet. Have a great weekend!

[Author]

Posts