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!

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!

6

hi there ive no idea how to make a new forum regarding my query so I thought id post on here and maybe someone could help me.. my problem is the exact same as the mans above except my slideshow uses moving animations and classes as mp4 video files which i made using canva. i’ve tried using your codes above and ones i’ve seen on other forums and they don’t seem to work.. the theme i use is horizon does anyone know the relevant coding to fix this so you can see the full slideshow on mobile and desktop view?