Event List Item Images Are Cut Off at Top and Bottom

🧑‍💻 Developers
1

Is there a setting I can change to ensure that the Event List Items are Displayed properly?

2

You can change their size in the look & feel settings. It you have a specific issue, please share some screenshots and a link to your widget.

3

Richard C. Eberhardt

I tried modifying the Event List Widget settings.

I increased the setting Look and Feel/Advanced/Media slider.

This did not resolve the problem of cut-off images (either in widget preview or in edit/preview mode)

Attached are:

Screen Shot of how the Widget looks on the main page of the site

Here is a link to my Widget (New Event List)

Dashboard | Common Ninja

[

Dashboard | Common Ninja

](Dashboard | Common Ninja)

Thanks,

Rich

Richard C. Eberhardt

Screen Shot of Home Page Showing Clipping of Images.png
Screen Shot of Home Page Showing Clipping of Images.png1057×474 314 KB

4

Images in event list items are often cut off due to incorrect aspect ratios or CSS settings. To fix this, ensure the images have consistent aspect ratios and use CSS properties like object-fit: cover or adjust the container’s height and overflow settings. This will help display the images properly without cutting off the top and bottom.

5

That’s correct. @riche You can set the object-fit property of the image to contain instead of the default cover.

6

Can you provide me an example of using this method to change the CSS in Google Sites?

Richard C. Eberhardt

7

@riche try to add the following custom CSS in our editor:

.plugin-wrapper .cn-elm-cover-image img {
   object-fit: contain;
}