Various Issues

[Darren Healy]

Hi there,

I have a some small niggling issues that I can’t seem to fix, maybe I’m missing something:

1. in the events list view – https://www.billingtonsoflenzie.co.uk/events/list/ – the text sits underneath the image, not to the right as in the screenshots here: https://theeventscalendar.com/product/wordpress-events-calendar/. I wish them to be like the screenshots with image to the left, and text to the right.

2. Still on the list view – moving to tablet and then mobile sizes the text does sit to the right of the image which is fine in part. However go further down screen width and you’ll see the text still tries to sit to the right of the image when really the image should be the full width, and now the text should sit underneath.

3. In each of the specific event pages I have selected to display a map but no map seems to appear.

4. Still in the event pages at smaller screen sizes the tickets and RSVP section goes a bit crazy and loses some of the nice styling which is present at medium screen sizes, plus the background. How do I fix this so that whatever is being applied at small screen sizes is better laid out and still have the background?

That’s about it for now :p

Darren

[Andras]

Hello Darren,

Thanks for using our plugins and welcome to the forums! Let me help you with your questions one-by-one.

 

1. in the events list view the text sits underneath the image, not to the right. I wish them to be like the screenshots with image to the left, and text to the right.

I believe this comes from the theme you are using. Nonetheless, this can be adjusted either by making the container wider or the image or the description less wide. For making the image less wide copy this css snippet into your theme’s style.css file. This should also provide a solution for less wide screens.

.tribe-events-list .tribe-events-event-image {
max-width: 210px;
}
@media screen and (max-width: 480px) {
.tribe-events-list .tribe-events-event-image {
max-width: unset;
width: 100%;
}
}

3. In each of the specific event pages I have selected to display a map but no map seems to appear.

This should be fixed if you set up a Google Maps API key. Check the link below for instructions on how to get an API key and then enter it under Events > Settings > APIs.

https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

 

4. Still in the event pages at smaller screen sizes the tickets and RSVP section goes a bit crazy and loses some of the nice styling which is present at medium screen sizes, plus the background. How do I fix this so that whatever is being applied at small screen sizes is better laid out and still have the background?

This snippet copied to style.css should help you fix that:

.single-tribe_events #tribe-events-content form.cart {
background: #fafafa none repeat scroll 0 0;
padding-left: 10px;
padding-right: 10px;
}
@media screen and (max-width: 768px) {
h2.tribe-events-tickets-title {
padding-top: 10px;
}
}

Please check these and let me know if they fix it for you.

Cheers,
Andras

[Darren Healy]

Thanks Andras, I think these have solved my issues, but I’ll try setting up this API for the maps before I close it. I’ll let you know how I get on.

[Andras]

Hey Darren, happy Monday,

I’m super stoked to hear most of the issues got solved!

Yeah, let me know on the map thing and I’ll help you out in case needed.

Cheers,
Andras

[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