Jump to content

Resize carousel gallery on mobile. (7.0)

Recommended Posts

On 6/6/2022 at 8:58 PM, lulu.lindberg said:

@tuanphan yes, all three of them there.

Hi. It looks like you figured it out? Can you share solution for other members?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 6/10/2022 at 11:31 PM, tuanphan said:

Hi. It looks like you figured it out? Can you share solution for other members?

I think it was this that did it, in custom CSS:

/* remove carousel padding mobile */
@media screen and (max-width:767px) {
div#block-e1c3c7b86e9d357920ab, div#block-yui_3_17_2_1_1612907473266_5403, div#block-yui_3_17_2_1_1613242503376_18794 {
    padding: 0px !important;
}}

I also have this in there, I'm not sure if it does anything.

@media screen and (max-width:767px) {
.services {
	.sqs-gallery-design-strip {
      overflow: visible;
      height: 200%;
	}
  }}

@tuanphan

Edited by lulu.lindberg
Link to comment
  • 1 month later...
On 8/2/2022 at 5:13 PM, TangerineStudio said:

Hi I'm having this problem too - Gallery carsouel is really small on mobile as you can see here. Tried various bits of code and cant seem to crack it, any help please. @tuanphan

Screenshot 2022-08-02 110742.png

Screenshot 2022-08-02 111251.png

Hi. What is site url?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 8 months later...

I believe that I am having this problem as well?  As the width of my screen shrinks the height of my images in a carousel shrinks (making the images very small on a mobile device).  I have tried the above advice and the best effect I can have is to keep the overall height of the gallery tall (ex: min-height: 150px, 30vh, etc.) however the images in that carousel gallery still shrink while the gallery height respects the limits.  This creates a large blank buffer (padding? I'm not sure the term) below the images when they top justify.

https://www.allyall.ca/built  (down at the bottom of the page "Previous Work")


    @media screen and (max-width:767px) {
    #block-yui_3_17_2_1_1675529450534_14167{
          overflow: visible;
          height: 300px;
     }
     }

I've tried doing both specific block ids and generic:

Also I am not sure if it is relevant but I have the following code that adds padding, which when I turn it off doesn't seem to effect it.

    /*Spaces between Carousel Gallery Images*/
    .sqs-gallery-design-strip-slide {  
    padding-right:10px;  
    margin-left:10px;  
    margin-top:0px;  
    margin-bottom:0px;  
    border-right: 1px solid #dcdcdc;
    }

Link to comment
On 5/1/2023 at 9:35 PM, MrJC said:

I believe that I am having this problem as well?  As the width of my screen shrinks the height of my images in a carousel shrinks (making the images very small on a mobile device).  I have tried the above advice and the best effect I can have is to keep the overall height of the gallery tall (ex: min-height: 150px, 30vh, etc.) however the images in that carousel gallery still shrink while the gallery height respects the limits.  This creates a large blank buffer (padding? I'm not sure the term) below the images when they top justify.

https://www.allyall.ca/built  (down at the bottom of the page "Previous Work")


    @media screen and (max-width:767px) {
    #block-yui_3_17_2_1_1675529450534_14167{
          overflow: visible;
          height: 300px;
     }
     }

I've tried doing both specific block ids and generic:

Also I am not sure if it is relevant but I have the following code that adds padding, which when I turn it off doesn't seem to effect it.

    /*Spaces between Carousel Gallery Images*/
    .sqs-gallery-design-strip-slide {  
    padding-right:10px;  
    margin-left:10px;  
    margin-top:0px;  
    margin-bottom:0px;  
    border-right: 1px solid #dcdcdc;
    }

You mean this?

image.png.0473b49831478b227113591fa346c945.png

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.