Table of Contents

Media Class CSS

Abby Updated by Abby

Please note that these classes are for Landbot V3

Media classes

.MessageMediaBubble{
}

.Media{
}

.modal-content{
}

.modal{
}

.modal-close{
}

Media size and scaling

In order to change the width of the image in the media block, we'll need to target 'MessageMediaBubble' as well as 'img'

Here's how we can change the width:

We can also add the 'transform' property if the image is too big or too small

Here's the code:

.MessageMediaBubble img{
	width: 600px!important;
  /*Scale image smaller or bigger*/ 
  transform: scale(0.9);
}

Another thing to keep in mind is that this class already has a max height, so to change the height you'll first need to add the following:

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

Box shadow

Using the media classes we can alter the media in the bot, in the example below I added a shadow to the photo, here's how:

.MessageMediaBubble{
    box-shadow: 10px 10px 10px 10px;
}

Here's the result:

Modal content

We can also change the size of the media when a user expands it with the following code:

.modal-content{
    width: 400px!important;
}

Here's what it looks like before:

And after:

If you want to remove the modal altogether and prevent the images from being clickable you can add the following to your CSS:

.modal{
  display:none!important;
}

Changing color of close icon

In case you have an image with a white background you can change the color of the closing icon in the modal, here's how:

.modal-close::after{
 background-color: grey!important;
}
.modal-close::before{
 background-color: grey!important;
}

How did we do?

Header Class CSS

Message Bubble Class CSS

Contact