My DIY Gallery Block testimonial slider for mobile view needs fix

Hello Squarespace experts!

I am in need of your assistance regarding this DIY testimonial gallery slider I made. It looks fine on desktop and tab view, but on mobile, it needs some fixing.

What I did is, I designed a review/testimonial template on Canva and I posted them on a gallery block. 

Initially, I wanted to make the photo bigger on mobile so it can be viewable.

This is my current code below:

//Mobile review gallery spaces EN//
@media screen and (max-width: 767px) {
 #block-yui_3_17_2_1_1663235763574_9695 .sqs-gallery-design-strip {
overflow: visible;
height: 200%;   
}
  //Mobile review gallery spaces DE//
  #block-yui_3_17_2_1_1668080702092_9511 {
    overflow: visible;
height: 200%;   
  }
}

I hope to make the photo bigger, so it can be readable.

Thank you in advance in your advice and help!

3 hours ago, Naomi-lifelab said:

Hello Squarespace experts!

I am in need of your assistance regarding this DIY testimonial gallery slider I made. It looks fine on desktop and tab view, but on mobile, it needs some fixing.

What I did is, I designed a review/testimonial template on Canva and I posted them on a gallery block. 

Initially, I wanted to make the photo bigger on mobile so it can be viewable.

This is my current code below:

//Mobile review gallery spaces EN//
@media screen and (max-width: 767px) {
 #block-yui_3_17_2_1_1663235763574_9695 .sqs-gallery-design-strip {
overflow: visible;
height: 200%;   
}
  //Mobile review gallery spaces DE//
  #block-yui_3_17_2_1_1668080702092_9511 {
    overflow: visible;
height: 200%;   
  }
}

 

I hope to make the photo bigger, so it can be readable.

Thank you in advance in your advice and help!

Can you share your URL so I can take a look?

17 hours ago, Beyondspace said:

Can you share your URL so I can take a look?

My apologies, Here are the URLs:

 https://lifelab.world/de/spaces 

As for DE page please scroll down to the "Was unsere Kunden sagen"  part

and https://lifelab.world/en/spaces

As for the EN page please scroll down to the "What our clients say"

5 hours ago, Naomi-lifelab said:

My apologies, Here are the URLs:

 https://lifelab.world/de/spaces 

As for DE page please scroll down to the "Was unsere Kunden sagen"  part

and https://lifelab.world/en/spaces

As for the EN page please scroll down to the "What our clients say"

Try the following code

@media only screen and (max-width: 767px) {
  #block-yui_3_17_2_1_1668080702092_9511 .sqs-block-content.sqs-intrinsic{
    padding-bottom: 35.0455% !important;
  }
  #block-yui_3_17_2_1_1663235763574_9695 .sqs-block-content.sqs-intrinsic{
    padding-bottom: 42.0455% !important;
  }
}

Support me by pressing 👍  or marking as solution if this useful for you

Hello @Beyondspace

Thank you for getting back to me so promptly.

I do apologize as I was on leave for quite some time so I was not able to apply the code at an earlier date.

I tried now, but the code for the EN version does not apply, this code
 

#block-yui_3_17_2_1_1663235763574_9695 .sqs-block-content.sqs-intrinsic{
    padding-bottom: 42.0455% !important;
  }

It just shows the review a bit smaller

So what I did is I kept your code for the DE version and kept the original version on the EN code which was the;
 

{
 #block-yui_3_17_2_1_1663235763574_9695 .sqs-gallery-design-strip {
overflow: visible;
height: 200%;   
}

Would you be able to help me fix the EN code with block #block-yui_3_17_2_1_1663235763574_9695?

Thank you in advance!