Adjust gallery width in mobile view

Site URL: https://www.ninebyjanellethon.com/

Hello. I have a full width gallery slideshow in my home page, but I want the images to always run in horizontal. When in Mobile View, the slideshow width adjusts automatically (which I know is part of the responsive design), but then the images are cropped in a vertical format.  I would like for these images to appear as horizontal as possible, because the images have a very wide view and would like to showcase that.  (I attached both desktop and mobile view of my website)

Hi @JanelleNine.

Here's a bit of code you can use to get you started. If you add other galleries to the the site and only want to target this one, you'll want to adapt the CSS a bit.

.gallery-fullscreen-slideshow {
  height: auto !important;
}
.gallery-fullscreen-slideshow-list {
  max-height: 100vh;
}

Let me know how it goes for you.

EDIT 7/22/2020:

In some cases, for mobile, you may also need something like

@media screen and (max-width: 767px) {
  .gallery-fullscreen-slideshow[data-height="L"] {
    height: auto !important;
  }
  .gallery-fullscreen-slideshow-item img {
    object-fit: contain !important;
  }
}

-Brandon

Thank you Brandon!!!! it worked!!! 

For some reason it is not working anymore... 

@brandon

@brandon Do you know why this code is not working anymore?

@tuanphan  help?

Code worked for me. Thanks!