Image sizes : Desktop / Mobile

Hi @pctevree

Thanks for using our plugin.
The issue is coming because the images of the events are of large size.
The best solution is to use the images with small size.

Alternative ways to fix or make it work for you are:

CSS Solution-1
Add the css code given below to the custom css setting given under Extra Setttings. This will give you output as shown in the screenshot here.

.ect-list-post{
	min-height: 300px !important;
}
.ect-list-post-right .ect-list-description{
	vertical-align: middle !important;
}
#ect-events-list-content .ect-list-img{
	background-position: unset !important;
}

CSS solution-2
Add the css code given below to the custom css setting given under Extra Setttings. This will give you output as shown in the screenshot here.

#ect-events-list-content .ect-list-img {
    background-color: #FF9902;	
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

Hiya, thank you big time for support!

We used the first solution, it looks awesome at desktop but at mobile its still not showing the complete images.

Can you fix that one too?

Post was set to resolved but we still are fighting with the mobile view at phones.

We used the first solution, it looks awesome at desktop but at mobile its still not showing the complete images.

Can you fix that one too?

Hi there

To show the complete images on mobile view you can add the CSS code given below to the custom CSS setting given under Extra Settings of plugin setting.? This will give you output as shown in the screenshot here.

@media only screen and (max-width: 767px){
.ect-list-post.style-2 .ect-list-img {
????background-size: contain!important;
????background-repeat: no-repeat!important;
????min-height: 250px!important;
????background-position: bottom center!important;
????background-color:?#E4E4E4!important;
}
#ect-events-list-content .ect-list-img{
???????background-position: bottom center!important;
????}
}

Yay, that helps a lot, BIG thank you!

Hello, I have the same problem but with grid-view:
My code:
[events-calendar-templates template=”grid-view” style=”style-1″ category=”year-2024″ date_format=”full” start_date=”” end_date=”” limit=”200″ order=”ASC” hide-venue=”yes” time=”all” featured-only=”false” columns=”3″ autoplay=”false” tags=”” venues=”” organizers=”” show-description=”no” socialshare= “no”]

Is there a way to resolve this? Hope you can help.

https://stormmuseum.de/veranstaltungen-2024/

Look at the last picture where the man’s head is missing.

Regards,
Lars

• This reply was modified 10 months, 1 week ago by blupi32.