Standrard image size on list and map view?

[kortris]

Hello,

Is there any way I can make the image of the events be the same in the list of the events? For example with dimensions like 178*238.

Thank you in advance

[Geoff B.]

Good evening Sotiris and welcome back!

Thank you for reaching out to us.
I would love to help you with this topic.

Is there any way I can make the image of the events be the same in the list of the events? For example with dimensions like 178*238.

Yes, you can absolutely do that using some CSS rules. But first, I would need to know which image you are referring to ? The Photo view ? The single event view ?

Ideally, if you could provide me with an example (using a URL), that would be awesome.

Best regards,

Geoff B.

[kortris]

This reply is private.

[kortris]

This reply is private.

[Geoff B.]

Good evening Sotiris,

Thank you for providing more details.

To my earlier point, you can totally force all images to a standard size in both the list view AND the map view.
But, there are a couple of things to be aware of:

• Your WordPress theme is responsive, so a fixed pixel image size might not look great on all platforms
• There is a wide variety of image ratios on your site. Forcing a certain size will likely cut some of these images off

With that in mind, you could try the following CSS rule:

.tribe-events-list .tribe-events-event-image {
width: 37%;
max-height: 178px;
overflow: hidden;
}

.tribe-events-list .tribe-events-event-image+div.tribe-events-content {
width: 60%;
}

Let me know how that goes.

Best regards,
Geoff B.

[kortris]

Thank you for your answer Geoff,

It is true that the list does not look good from a mobile after i edit the css.
When i have changed the code in order to fix it the list looked ok from a desktop and in a mess from a pc.

.tribe-events-list .tribe-events-event-image {
width: 37%;
max-height: 178px;
overflow: hidden;
}
 
.tribe-events-list .tribe-events-event-image+div.tribe-events-content {
width: 80%;
}

Do you have any idea about how i can get this fixed?

Thank you in advance!

• This reply was modified 10 years ago by kortris.

[Geoff B.]

Good evening Sotiris,

That is a very good question.

As you can imagine, it might get quite lengthy to provide a complete crash course on responsive design and media queries over this thread.

Just to set expectations, as you might know, the scope of our support is mostly to get our wonderful customers started on the right track to customize their site and to help them in case of issues. We unfortunately do not provide complete support for customization.

But, the good news is that there are a plenty of ressources one click away on Google and YouTube 🙂

With that in mind here are the main things to know if you want to tweak the look:

1. If you look at the CSS files for the Events Calendar (/wp-content/plugins/the-events-calendar/src/resources/css) you will notice that they have slightly different rules based on the screen size, so you could totally do the same for your tweaks. Here’s a link to get you started on this topic: http://www.w3schools.com/css/css_rwd_mediaqueries.asp
2. To avoid problems, I would recommend that the sum of the width of the 2 CSS elements is not greater than 97% (unless you want these elements on separate lines)

Let me know how that goes.

Best regards,
Geoff B.

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts