Resizing image slideshow blocks on mobile view

Site URL: https://www.strandlock.co.uk/about-aveda

Hi, I applied the slideshow gallery block for 4 of my pages and they look just fine on laptop view, however, they become very small on mobile view and I have tried many codes but none seem to be working (I have attached the mobile view as well). The one I am currently using is:

@media screen and (max-width:640px) {
    #sqs-gallery-design-strip-slide{
       min-heigh: 40vh !important;
   }
   }

or I have also tried it with width:

@media screen and (max-width:640px) {
    #sqs-gallery-design-strip-slide{
       width:100% !important;
   }
   }

The links are as follow (all with the same problem):

https://www.strandlock.co.uk/about-aveda

https://www.strandlock.co.uk/aveda-colour

https://www.strandlock.co.uk/scalp-health

Does anyone have an idea maybe why the code is not working? Thanks a lot!

Hi @sss_aaa,

It looks like you've fixed this. Could you please paste in your solution?

Thanks,

Hikaru

17 hours ago, capturecollect said:

Hi @sss_aaa,

It looks like you've fixed this. Could you please paste in your solution?

Thanks,

Hikaru

They used this CSS

@media screen and (max-width:767px) {
.sqs-gallery-design-strip {
    height: 50vh;
	overflow: scroll;
}
}

Hi, I'm having a similar issue on my site and have tried this code with no luck.

Here's the site www.sulphurmountainroad.com 

The problem is the image slideshow(testimonials) halfway down the home page look great on desktop, but on mobile it's too small. How do I make it bigger for mobile?

Or is there a way to have different images for the mobile slideshow? I can remake the testimonial images to be vertical and have those play on the mobile version while keeping the horizontal images for desktop. Anybody know? @tuanphan ? 

On 1/25/2021 at 7:45 PM, AaronSMR said:

Hi, I'm having a similar issue on my site and have tried this code with no luck.

Here's the site www.sulphurmountainroad.com 

The problem is the image slideshow(testimonials) halfway down the home page look great on desktop, but on mobile it's too small. How do I make it bigger for mobile?

Or is there a way to have different images for the mobile slideshow? I can remake the testimonial images to be vertical and have those play on the mobile version while keeping the horizontal images for desktop. Anybody know? @tuanphan ? 

You can add 2 slideshows, then we will give the code to show 1 on desktop, show 1 on mobile

On 2/25/2021 at 1:38 AM, emara33 said:

Just tried, but it doesn't worked for me. Can I have 3 columns on laptop and simply 1 column on mobile version? Appreciate your assist!

Can you share link to your site? We can check easier

You forgot the "t" in "height" in the original posed question!

On 8/20/2020 at 7:37 AM, tuanphan said:

They used this CSS

@media screen and (max-width:767px) {
.sqs-gallery-design-strip {
    height: 50vh;
	overflow: scroll;
}
}

 

This code works, but look what happens, the gallery goes behind the next section.

On 4/13/2022 at 5:20 AM, HunterD said:

This code works, but look what happens, the gallery goes behind the next section.

Can you share link to page where you have problem?

I am having a similar issue with the expanded gallery overlapping with the next block. Was this solved?

On 12/1/2022 at 5:37 AM, yakobi said:

I am having a similar issue with the expanded gallery overlapping with the next block. Was this solved?

If you share link to page where you have problem on your site, we can help easier