Event images are displayed on the page for the event, as well as in event cards. The image ratio is the same for both areas, so you’ll only need to create one image.

Because the website is responsive, the image may be cropped horizontally on some smaller displays resulting in large parts of the image being cut off.

You can compensate for this by following these guidelines:

• Event images should be 900px wide by 420px high
  

• The general “safe zone” (outlined in green and purple) for the most important area of the image is a 428-594px-wide area in the middle of the 900px wide image. If you keep your logo, etc., within that area, it will be less likely to be cut off in any way on most screen/browser sizes.
  

• On most current smartphones, the event image will generally never display smaller than 282px wide by 420px high (outlined in red).
  

       

Below are some examples of how an event image is displayed on different screen sizes. We have added a gray background to the 900x420px image so you can see how wide the image actually is.

In general, on an Event page the event image will display like this:

 

It will display similarly in an event card: 

  

On smaller screens or smaller browser windows, you’ll see that more of the sides of the image are cropped:

 

On an iPhone or similarly sized smartphone, you’ll see only a 282px wide section in the center of the image is displayed: