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.

Keep in mind that Landbot compresses the images, so while the images will be shown in the following size, it's best practice to use a larger image so it won't be pixelated.

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;
}

Buttons with Image

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

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?

Contact