Resize Mobile Gallery Slideshow without removing Descriptions & Arrows

I want to edit our homepage gallery slideshow on mobile only so that it shows the max width without cropping the height or stretching the image.

This is the code I tried using to show the full images in the gallery, but now it won't show the the navigation arrows on the sides nor the image descriptions (should be centered like how it is on the desktop).

<STYLE>
@media screen and (max-width:640px) {
section#home-gallery img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
section#home-gallery {
    height: 210px;
}
}</STYLE>

*Note: I don't mind if the width of the images is cropped slightly. It just can't be cropped to the point of how it looks without any custom code. As long as you can read "Collin" and "UGP" on the first image in the gallery, that's fine with me.

Can you share link to page where you use slideshow? We can check easier

On 1/19/2023 at 3:36 PM, tuanphan said:

Can you share link to page where you use slideshow? We can check easier

Hey Tuan,

It's the top gallery of our home page: http://urbangolfperformance.com/

On 2/2/2023 at 2:02 AM, jsugp said:

Hey Tuan,

It's the top gallery of our home page: http://urbangolfperformance.com/

Try adding this code under

<style>
  @media screen and (max-width:640px) {
  .tweak-index-gallery-controls-large-arrows .Index-gallery-control {
    top: 15% !important;
}
  }
</style>

On 2/3/2023 at 12:05 AM, tuanphan said:

Try adding this code under

<style>
  @media screen and (max-width:640px) {
  .tweak-index-gallery-controls-large-arrows .Index-gallery-control {
    top: 15% !important;
}
  }
</style>

 

This worked to show the arrows, but unfortunately it still crops the image 😞 Is there a way to show the arrows but also show the entire image instead of cropping it to fit mobile?

On 2/3/2023 at 12:05 AM, tuanphan said:

Try adding this code under

<style>
  @media screen and (max-width:640px) {
  .tweak-index-gallery-controls-large-arrows .Index-gallery-control {
    top: 15% !important;
}
  }
</style>

 

Disregard my initial reply. I added this after my initial code and it works to show the full width of the image + the arrows. Now it's just missing the image titles. They should display on the center of the image (if you view on desktop, you'll see it).