Why are images in my slideshow cut-off in mobile view?

I need help to work out why the ends my images are being cut off in my slideshow when on my mobile. I have a slideshow on my homepage and you see the full images when I look on a desktop but on my mobile it is cutting the sides of the images off. When I am in the editing mode on mobile-view it doesn't show them being cut off on the display slideshow. But on my mobile they are still cut off.  This has only just started happening out of nowhere. They were fine before. I don't know what changed. I have attached images here which show the correct view in the editing mode, then the other image is how it shows on my phone with the face chopped off. 😞 Really appreciate anyones help 🙂. Thanks friends. 

You can add this to Design > Custom CSS to resize slideshow on mobile

@media screen and (max-width:767px) {
body.homepage .gallery-fullscreen-slideshow {
    height: 25vh !important;
    margin-top: 5vh;
}
}

Thank you for this suggestion. Would you advise that I get a profession web designer to add this code? I am a lay person so am guessing it is not as easy as just copying this straight into the CSS section myself? 

8 hours ago, NicolaAnneColbran said:

Thank you for this suggestion. Would you advise that I get a profession web designer to add this code? I am a lay person so am guessing it is not as easy as just copying this straight into the CSS section myself? 

Just go to this 

choose this

add the code & save

Thanks so much for that. I really appreciate it. 🙂

This is really helpful. Is there a way to test this addition of code before saving it permanently? 

I'm having an issue with gallery captions being cut off as well. I'm using gallery slideshow:simple set to height L. The captions look great in desktop but get cut off in mobile. Any insight on how to fix this?

https://www.katiebottrell.com/strategy-work and https://www.katiebottrell.com/project-work

17 hours ago, Bell6650 said:

I'm having an issue with gallery captions being cut off as well. I'm using gallery slideshow:simple set to height L. The captions look great in desktop but get cut off in mobile. Any insight on how to fix this?

https://www.katiebottrell.com/strategy-work and https://www.katiebottrell.com/project-work

Use this code to Website > Website Tools > Custom CSS
 

@media screen and (max-width:767px) {
[data-section-id="66560b832b95230ea1764016"], [data-section-id="6656161d71d13e15ce3b4648"] {
    margin-bottom: 70px;
}
body {
    background-color: #f1f1ef
}

.gallery-caption-wrapper {
    overflow: visible !important;
}}

That worked! I so very much appreciate your help! THANK YOU!