Table of Contents

Recommended Image Sizes

Abby Updated by Abby

There are some ideal sizes for media types so that we avoid stretching the photos or cutting them off.

Message Bubble Media

The Message Bubble Media size is 348 x 232 pixels

Here's how to change this media size

One thing to keep in mind is that the max height for this element is 400px, so to change the height you'll first need to add this:

img{max-height: 800px!important;}

Dynamic Data

The ideal size for the images in dynamic data is 300 x 190 pixels, or 300 x 330 without the label

Changing dynamic data media sizes:

To target the image in the dynamic data block we need to use the .card-image class:

.card-image{
height: 280px!important;
}

For the picture choice, the first photo will appear at 300 x 330 pixels

Changing media sizes in picture choice

The code:

.slick-active{
width: 190px!important;
}

Button Picture Choice

When adding pictures to buttons we want to aim for 190 x 100 pixels

Customizing this button

The code:

.input-button img{  
transform: scale(.9)!important;
}

This will scale the image down so it fits in the button

Background Image

The recommended background image size for desktop is a width of 1300px and a height of 735px.

For mobile, the recommended height is 800px and width 375px

Remember that if you're uploading the photo via URL, it needs to end in a valid extension (.jpg, jpeg, png etc) otherwise it will appear as a link and not a photo.

How to display images with a variable url source

How did we do?

Miscellaneous Classes CSS

Contact