Jump to content

Resize Mobile Gallery Slideshow without removing Descriptions & Arrows

Go to solution Solved by tuanphan,

Recommended Posts

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.

Link to comment
  • Replies 6
  • Views 374
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • 2 weeks later...
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

image.thumb.jpeg.396912493cac4f390569575d293f57fc.jpeg 

Link to comment
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).

Link to comment
  • Solution
On 2/8/2023 at 2:57 AM, jsugp said:

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).

Use this new code

<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;
}
  section#home-gallery article.Index-gallery-item {
    height: 210px !important;
    }
  .tweak-index-gallery-controls-large-arrows .Index-gallery-control {
    top: 15% !important;
}
  }
  </style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.