Increase width of Events page

[nychaps]

Hi, I’d like to increase the width of my events page. My organization made the switch to Events Calendar for the convenience, but because of the small photos it doesn’t look as good as our current blog layout. My events page looks like it’s getting compressed in because of the Organic Themes wrapper on the page. Any suggestions on how I can alter the code to increase the width of the blog page and/or increase the size of the photos?

I’ve attached before and after shots of the events page on my site.

Thanks.

[nychaps]

Current blog page

[Patricia]

Hey @nychaps,

Thank you for reaching out to us!

You can change your Event’s page width by adding this code in the end of your theme’s style.css file:

#tribe-events-content-wrapper {
    width: 120% !important;
}

You can also adapt your calendar to use your theme’s stylesheet and see if it helps to achieve what you want by accessing your Dashboard and heading over to Events > Display > Basic Template Settings and changing the “Default stylesheet used for events templates” option.

I hope this helps! Let me know if you need anything else and I’ll be happy to assist!

Regards,

Patricia

[nychaps]

Hi Patricia, thank you for the quick reply. Unfortunately, the code snippet didn’t change anything on my events page. Any idea what could be causing the code not to work? I upped to percentage to 150% and 200%, but there is no change the the events calendar page.

I did do a fair amount of changing styles in Events > Settings > Display before I submitted this ticket. Tribe Events Styles looks best, but none look as good as the samples on your site because of the content wrapper issue.

Any other ideas?

Thanks very much for your time,
Julie

[Patricia]

Hi Julie!

Since you want your calendar layout to be similar to your current blog page (http://northernyorkhistorical.org/category/events/), I would suggest you to change your calendar default view from Photo View to List View and change the tribe-events-event-image default size from 30% to 100%, the result would be something like this.

The code you need to add to your theme’s style.css file is:

.tribe-events-event-image {
    width: 100% !important;
}

Regarding the width issue, I would recommend you to contact your theme developer for further assistance and help you to identify the correct CSS selector and solve the conflict.

I hope this helps! If you have any other questions in the mean time, please let me know and I’ll be happy to assist!

Best regards,

Patricia

[nychaps]

Thank you, Patricia. The look of my events page didn’t change when I added this to my style.css page, either 🙁

Hm…

[Patricia]

Hi Julie,

I’m sorry to read that! Can you please Clear/Purge your site’s cache (and your browser cache as well) and check if everything works as expected after that?

If the issue persists, can you please send me a copy of your theme files in a private reply so I can further investigate why your CSS updates are not working as expected?

Thanks!

Patricia

[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