Image Overflows When Switching to Mobile View

Bootstrap Studio Help
1

I have an image in a COLUMN. The column width is 485px and height is 400px. My image had a width of 455px and height of 400px. The image looks great in all 3 views- tablet, laptop, and monitor, but not the mobile. The image overflows if I view on my phone. How do I fix this problem? I have included pictures below. Thank you.

2

Try setting your images to be responsive.

Select each image > in rh menu select responsive image toggle to activate > this will apply a class that will make your images 100% therefore will scale up and down based on your container width

3

I can't believe I missed that. Thank you so much. Worked.

4

And if you do not actually want a responsive image (ie you want it to overflow at same size, but clip itself within the body, and not have the horizontal scroll bar, then use:

body{
   overflow-x:hidden;
}