Jump to content

How do I stop the gallery slideshow from cropping the images & just scale down instead?

Recommended Posts

Posted
On 1/13/2023 at 10:30 AM, april_tak said:

Hi @tuanphan, my page has the same issue. I've tried all codes above but it's not helping.

Please find the page here: 

https://www.redressdesignaward.com/home

Thanks in advance for the help!!

You mean this gallery?

image.thumb.png.7a534d3c1f9482e5fb561e69460ea63c.png

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

  • 2 weeks later...
Posted
On 1/30/2023 at 5:21 PM, april_tak said:

@tuanphan yes, that's the gallery which crop the images

Hi. It looks like you solved with this code?

 @media only screen and (max-width: 640px) {
    .sqs-gallery-block-slideshow{
      height:30vh !important;}
    .sqs-gallery-block-slideshow img{
      width:50%}
    
    .sqs-gallery-block-slideshow .meta {
      display: block !important;
      position: absolute;
      background: #fff;
      width: 100vw;
      min-height: 300px !important;
      left: 0px;
      top: 30vh;
      max-width: 100% !important;
      z-index:0;
    }
    .sqs-gallery-block-slideshow .meta-title {
      color:rgb(84,84,84) !important;
      text-align: center;
      font-size:20px !important;
      padding-bottom:25px;
    }
    .sqs-gallery-block-slideshow .meta-description p, .sqs-gallery-block-slideshow .meta-description a {
      color:rgb(84,84,84) !important;
      text-align: justify;
      font-size:16px !important;
    }
    #block-yui_3_17_2_6_1488331956550_8686 {
      padding-top:300px !important;
      z-index: -1 !important;
    }
}

 

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

Posted
On 2/1/2023 at 2:53 PM, tuanphan said:

Hi. It looks like you solved with this code?

 @media only screen and (max-width: 640px) {
    .sqs-gallery-block-slideshow{
      height:30vh !important;}
    .sqs-gallery-block-slideshow img{
      width:50%}
    
    .sqs-gallery-block-slideshow .meta {
      display: block !important;
      position: absolute;
      background: #fff;
      width: 100vw;
      min-height: 300px !important;
      left: 0px;
      top: 30vh;
      max-width: 100% !important;
      z-index:0;
    }
    .sqs-gallery-block-slideshow .meta-title {
      color:rgb(84,84,84) !important;
      text-align: center;
      font-size:20px !important;
      padding-bottom:25px;
    }
    .sqs-gallery-block-slideshow .meta-description p, .sqs-gallery-block-slideshow .meta-description a {
      color:rgb(84,84,84) !important;
      text-align: justify;
      font-size:16px !important;
    }
    #block-yui_3_17_2_6_1488331956550_8686 {
      padding-top:300px !important;
      z-index: -1 !important;
    }
}

 

Hi @tuanphan, the code is added, but the problem remains. So NO, the issue has yet to be solved.

  • 3 weeks later...
Posted

Hi @tuanphan,

I'm having the same issue for two SquareSpace artist sites that I'm building. I've tried all of the solutions that you suggested with no luck for the store product gallery (the store landing page). I did get the product detail pages working with this code:

img.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
}
 

Here are the two sites - the images on the product store page are cropped, but product detail pages are ok: 

https://www.madjello.com/julia

https://www.andreawilkinsonfineart.com/

Thanks!!

Lori

Posted
On 2/20/2023 at 4:40 AM, Loribo said:

Hi @tuanphan,

I'm having the same issue for two SquareSpace artist sites that I'm building. I've tried all of the solutions that you suggested with no luck for the store product gallery (the store landing page). I did get the product detail pages working with this code:

img.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
}
 

Here are the two sites - the images on the product store page are cropped, but product detail pages are ok: 

https://www.madjello.com/julia

https://www.andreawilkinsonfineart.com/

Thanks!!

Lori

Use this code for store page

.products.collection-content-wrapper .grid-item img {
    object-fit: contain !important;
}

 

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

  • 3 months later...
Posted

Hello Tuanphan, 

URL: https://formebar-sample.squarespace.com/
PW: HC

I am trying to keep the image intact without the need to scroll. But want it on full bleed, you will see that there is header and the image below it is cropped. See attached. 

I am hoping to achieve this from reference site: https://www.pickuplimes.com/ where it has header and then image that ends before you scroll down the page. 

So, 1, i am thinking need to decrease height of header?
2, also need how to add caption on the image on same place as reference site?
 

Screenshot 2023-06-13 at 7.36.27 PM.png

Posted
On 6/14/2023 at 9:38 AM, Mary_DG said:

Hello Tuanphan, 

URL: https://formebar-sample.squarespace.com/
PW: HC

I am trying to keep the image intact without the need to scroll. But want it on full bleed, you will see that there is header and the image below it is cropped. See attached. 

I am hoping to achieve this from reference site: https://www.pickuplimes.com/ where it has header and then image that ends before you scroll down the page. 

So, 1, i am thinking need to decrease height of header?
2, also need how to add caption on the image on same place as reference site?
 

Screenshot 2023-06-13 at 7.36.27 PM.png

Something like this?

image.thumb.png.76fc1dfeee42b8e2759a68bd8fb34494.png

With reference site, I see it has issues with layout. Can you check it again?

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

  • 3 weeks later...
Posted
42 minutes ago, tuanphan said:

You mean top image on homepage on mobile?

no, on the gear page the reel gallery images are cropping themselves 

  • 11 months later...
Posted
20 hours ago, maboli said:

Hi, I want to stop the slide show on my landing page on the last slide, is this possible?

Also, is there a way I can fit it to the screen on mobile?

https://helicon-cardioid-tcx8.squarespace.com/
pw. studionh_ap

To fit on mobile, you can use this code to Website Tools (under Not Linked) > Custom CSS

@media screen and (max-width:991px) {
.gallery-fullscreen-slideshow {
    height: 25vh !important;
}
}

 

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

  • 2 weeks later...
Posted

I also have a problem where the last slide is briefly showing when the site first loads, is there a way I can remedy this. The code I have used is as follows:
 

sections .gallery-fullscreen-slideshow[data-transition="fade"] {
  figure, .gallery-fullscreen-slideshow-item-src{
    opacity:1;
  }
  .gallery-fullscreen-slideshow-item{
    visibility: visible;
  }
}#sections .gallery-fullscreen-slideshow[data-transition="fade"] {
  figure, .gallery-fullscreen-slideshow-item-src{
    opacity:1;
  }
  .gallery-fullscreen-slideshow-item{
    visibility: visible;
  }
  figure:last-child {
    animation: fadeIn 0.5s ease;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

Posted
On 7/10/2024 at 2:34 PM, maboli said:

I also have a problem where the last slide is briefly showing when the site first loads, is there a way I can remedy this. The code I have used is as follows:
 

sections .gallery-fullscreen-slideshow[data-transition="fade"] {
  figure, .gallery-fullscreen-slideshow-item-src{
    opacity:1;
  }
  .gallery-fullscreen-slideshow-item{
    visibility: visible;
  }
}#sections .gallery-fullscreen-slideshow[data-transition="fade"] {
  figure, .gallery-fullscreen-slideshow-item-src{
    opacity:1;
  }
  .gallery-fullscreen-slideshow-item{
    visibility: visible;
  }
  figure:last-child {
    animation: fadeIn 0.5s ease;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

Have you solved it yet?

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

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.