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? 

14 hours ago, DENatira said:

Is there a way to test this addition of code before saving it permanently?

By adding the code to the CSS panel you are testing it locally.

It will only be visible to the public and saved permanently when you click SAVE.

Did this help? Please give feedback by clicking an icon below  ⬇️