Making Slideshow fullscreen on mobiles (Debut Theme)

Store Design
1

EDIT: Since I didn’t get a reply, and unless someone can provide a better solution, I’m posting below what I did in order to accomplish this, maybe it will be useful to others.

Go to Edit Code > Assets > Theme.css

Making the slideshow fullscreen:

On Line 4941

I’ve changed this:

.slideshow–large {> height: 375px; }> @media only screen and (min-width: 750px) {> .slideshow–large {> height: 775px; } }

To this:

.slideshow–large {> height: 100vh; }> @media only screen and (min-width: 750px) {> .slideshow–large {> height: 100vh; } }

2. Removing the slide text from the bottom and keeping it over the slide

a) Removing the mobile version of the text which shows at the bottom:

Line 5071

Change this:

.slideshow__text-content–mobile-active {> display: block; }

To this:

.slideshow__text-content–mobile-active {> display: none; }

b) Reactivate the desktop version of the text which shows the text in the middle overlaying the slide.

Line 5074

Replaced This:

.slideshow__title,> .slideshow__subtitle {> color: var(–color-overlay-title-text); }> @media only screen and (max-width: 749px) {> .slideshow__title,> .slideshow__subtitle {> display: none; } }

For This:

.slideshow__title,> .slideshow__subtitle {> color: var(–color-overlay-title-text); }> @media only screen and (max-width: 749px) {> .slideshow__title,> .slideshow__subtitle {> display: block; } }

If you which to further refine the height of the slideshow, depending on the height of your header, you might want to change the slideshow max-height which by default is set to 80vh:

Line 4901

.slideshow {> position: unset;> overflow: hidden;> margin-bottom: 0;> max-height: 80vh;

That’s it.

1 Like
2

@DxMartins

Wow That would be great, thanks for sharing.

1 Like