Jump to content

How can I get a full bleed slideshow block on mobile?

Recommended Posts

Site URL: http://www.grismphotography.com

I have a specific code that makes it so this slideshow only shows up on mobile and tablet devices, or screens smaller than 800 px. The issue is that the image is very small when viewed on mobile. I would like for the image to extend for the entire width of the page. In the image attached, I want the image to go to the red borders. This is a gallery slideshow block as part of an index page. I cannot add another gallery page because the block ID remains the same and will treat it as such. 

website.png

Link to comment
  • Replies 3
  • Views 246
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Try adding to Design > Custom CSS

@media screen and (max-width:640px) {
body.homepage .sqs-gallery-design-stacked-slide img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
body.homepage .sqs-gallery-design-stacked-slide {
    overflow: hidden;
}
}

 

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
6 hours ago, tuanphan said:

Try adding to Design > Custom CSS

@media screen and (max-width:640px) {
body.homepage .sqs-gallery-design-stacked-slide img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
body.homepage .sqs-gallery-design-stacked-slide {
    overflow: hidden;
}
}

 

Thank you so much!

That seems to have worked for the width but vertical images are now getting cropped. Any way to extend length as well?

website.png

Link to comment
18 hours ago, grizzy13 said:

Thank you so much!

That seems to have worked for the width but vertical images are now getting cropped. Any way to extend length as well?

website.png

Try remove this code

body.homepage .sqs-gallery-design-stacked-slide {
    overflow: hidden;
}

 

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.