Jump to content

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

Recommended Posts

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

Link to comment
  • 2 weeks later...
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!)

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

Link to comment
  • 3 weeks later...

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

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

Link to comment
  • 3 months later...

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

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

Link to comment
  • 3 weeks later...
23 minutes ago, Fae said:

I am also having this issue and have not been able to find any code that will fix it 

@tuanphan Can you help?

 

https://helix-tunny-psaf.squarespace.com/

pass: 321

You mean top image on homepage on mobile?

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.