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.