Jump to content

My DIY Gallery Block testimonial slider for mobile view needs fix

Recommended Posts

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

 

Reviews update.png

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

Thank you in advance in your advice and help!

Edited by Naomi-lifelab
added explanation
Link to comment
  • Naomi-lifelab changed the title to My DIY Gallery Block testimonial slider for mobile view needs fix
  • Replies 4
  • Views 391
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

 

Reviews update.png

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?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 1 month later...

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 smallerSmallerreviews.png.60a444c915cad7eb3db942bbec1459ea.png

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!

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.