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

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;
}

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!

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

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;
}
}

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?

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?

 

Try using Classic Editor Section for this section

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

@tuanphanThis worked for me but now on mobile the text under the carousel stayed in the same spot and is overlaying the carousel. 😀 Any help? Thank you.

On 8/3/2024 at 3:02 AM, notnothing said:

@tuanphanThis worked for me but now on mobile the text under the carousel stayed in the same spot and is overlaying the carousel. 😀 Any help? Thank you.

Can you share link to page where you have problem?

5 hours ago, tuanphan said:

Can you share link to page where you have problem?

www.lillytaylorinteriors.com/stonebridge

Fixed this by just editing the markdown in mobile mode. @tuanphansuggested just pulling the text under the photo and that worked perfectly. I was overcomplicating it! Thank you!

Does anyone know if I can use this code to add a counter for the carousel? It has a section labeled "carousel content here" but I do not understand what to enter there. 

<div class="carousel js-carousel">
  <!-- carousel content here -->

  <span class="js-carousel__counter"></span>/<span class="js-carousel__counter-tot"></span>
</div>

I also would like to move the carousel controls to the bottom next to the counter if possible. Like this,