Jump to content

Resizing image slideshow blocks on mobile view

Recommended Posts

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!

 

image.thumb.png.36821f97e9be081d4100118e893a2a93.png

Link to comment
  • 3 weeks later...
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;
}
}

 

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
  • 5 months later...

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

Edited by AaronSMR
so link is more accesible
Link to comment
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

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/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

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
  • 5 months later...
  • 7 months later...
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.

Screen Shot 2022-04-12 at 19.19.22.png

Screen Shot 2022-04-12 at 19.21.00.png

Edited by HunterD
Link to comment
  • 7 months later...
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

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.