How to make a full-screen slideshow on mobile devices?

Store Design
1

Hi all,

How do I make the slideshow on mobile devices take up the entire screen? Currently, the image is smaller and only takes up a portion of the screen. But I really want the image to be larger so it takes up the entire screen. It would just make it look better. I am using the dawn theme.

My website is www.PennsylvaniaParks.org

Thank you!

2

Hi @Justin34
If you want to make the slide show full height of screen.
You can try follow this path:
Themes => edit code => asset => component-slideshow.css
and add this code to bottom of the file component-slideshow.css

@media screen and (min-width: 750px){
.banner--medium:not(.banner--adapt) {
  min-height: calc(100vh - 110px);
}
}
3

Hi,

Adding the below CSS at the end of your base.css file should be working as expected.

@media (max-width:768px) {
slideshow-component .slideshow.banner {
  height: 75vh !important;
}
}

GabrielS_0-1667011919921.png
GabrielS_0-1667011919921.png498×869 284 KB

Feel free to adjust the 75vh value as you please.

Cheers!

1 Like
4

Hi - please note that your current code is intended for screens that are having a minimum width of 750px - you might consider changing min-width to max-width.

Cheers!

5

That worked perfectly. Thanks so much!