Jump to content

Adjusting Height of a Gallery - Carousel Block for Mobile in 7.1 Fluid

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://casa-design-la.squarespace.com/home

I'm currently working on a page that features a Gallery block with Carousel setting.

By default the block looked great on desktop, but teeny tiny on mobile.

I added the below code to adjust the height of the images and mobile looks much better, but now on desktop I'm seeing side overlap from the images next to what's being featured.

The amount of overlap differs with each new featured image, and it's not always only on the right side.

Any thoughts on how to fix?

Site URL referenced, pw: casa

/* Enlarge Gallery Carousel block for mobile -- turned off arrows */
.sqs-gallery-design-strip 
{
    position: relative;
    overflow: hidden;
    min-height: 500px;
}

284466166_ScreenShot2022-09-23at11_25_51AM.thumb.png.abcb898fd1fcc100f9b9fdf671dd07eb.png

 

 

Kaila S
Shopify Partner, Squarespace Circle Member & MailChimp Expert

yumari digital
websites · email campaigns · ads · social media · graphic design

 

 

Link to comment
  • Solution

You can add query code to make code run on mobile only

@media screen and (max-width:767px) {
/* Enlarge Gallery Carousel block for mobile -- turned off arrows */
.sqs-gallery-design-strip 
{
    position: relative;
    overflow: hidden;
    min-height: 500px;
}
}

 

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 9/24/2022 at 1:47 AM, tuanphan said:

You can add query code to make code run on mobile only

@media screen and (max-width:767px) {
/* Enlarge Gallery Carousel block for mobile -- turned off arrows */
.sqs-gallery-design-strip 
{
    position: relative;
    overflow: hidden;
    min-height: 500px;
}
}

 

That worked, thank you!

Kaila S
Shopify Partner, Squarespace Circle Member & MailChimp Expert

yumari digital
websites · email campaigns · ads · social media · graphic design

 

 

Link to comment
  • 1 year later...
On 9/24/2022 at 4:47 AM, tuanphan said:

You can add query code to make code run on mobile only

@media screen and (max-width:767px) {
/* Enlarge Gallery Carousel block for mobile -- turned off arrows */
.sqs-gallery-design-strip 
{
    position: relative;
    overflow: hidden;
    min-height: 500px;
}
}

 

Hi @tuanphan! I was hoping I could reuse this code to do the opposite—I'd like to make my gallery smaller on mobile. I've gotten close with the following code, but the gallery images crop from the bottom rather than using my focal points.

.sqs-gallery-container
{
position: relative;
overflow: hidden;
max-height: 40vh;
}

I'd so appreciate any thoughts!

https://fife-sunflower-68mk.squarespace.com/spa-menu
pw: elipsis

Link to comment
On 1/17/2024 at 10:29 PM, mbockmaster said:

Hi @tuanphan! I was hoping I could reuse this code to do the opposite—I'd like to make my gallery smaller on mobile. I've gotten close with the following code, but the gallery images crop from the bottom rather than using my focal points.

.sqs-gallery-container
{
position: relative;
overflow: hidden;
max-height: 40vh;
}

I'd so appreciate any thoughts!

https://fife-sunflower-68mk.squarespace.com/spa-menu
pw: elipsis

Removed code & use this code

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1703002667545_5773, div#block-yui_3_17_2_1_1703002667545_5773 .slide {
    height: 300px !important;
}
div#block-yui_3_17_2_1_1703002667545_5773 a[role="button"] {
    top: 20% !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
  • 4 weeks later...
On 2/15/2024 at 3:34 PM, charlineca said:

Hi @thuanplan, I tried to use your code and it works, but my "box" where the images are in is still full size (leaving huge spacing at the bottom), and the arrows are not centered in the middle of the image anymore. Any way to fix this?

 

Screenshot 2024-02-15 at 14.03.16.png

Try using Classic Editor Section for this section

Or can you share link to page? We can check easier

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.