DAWN: How Can I Increase Slideshow Height for Desktop and Remove Extra Space on Mobile?

[SNK1986]

Can someone please help, I feel stuck. I added this custom CSS to the Dawn theme to increase the Slideshow height on desktop :

.slideshow.banner.banner--medium {
min-height: 100vh;
}

This code worked to increase the desktop slideshow height, but it created some problems. Now there's a massive blank white space underneath the slideshow on mobile. How do I get rid of that space on mobile, but still have my slideshow at full size?

Also, another issue is that the width of my slideshow images are cut off on the left and right of my images. How do I make my image fit to mobile without the width getting cut off?

[ThePrimeWeb]

Hey @SNK1986,

You can replace that code with this to only affect desktop

@media only screen and (min-width: 990px) {
 .slideshow.banner.banner--medium {
   min-height: 100vh;
  }
}

[SNK1986]

Hi Marvelpro, 

This partially worked. The large white space underneath is gone. However, that did not fix the sizing issue on mobile. The image is still the same on mobile where the width of the image is cutting off on each side. Do you know why that's still happening?

Also, I did try the suggestion below from Devcoders, it did make my image fit the width of mobile, but it added a large grey box underneath the image plus a large white space under it on both mobile and desktop.

Your suggested code was the closest I got to fixing it, but it only fixed the white space. 

Thanks,

-SNK1986

[devcoders]

Hi @SNK1986 

Go to Online Store, then Theme, and click on Edit code.

Locate the file assets/base.css, and paste the code provided below at the end of the file.

.slideshow.banner.banner--medium {
min-height: 100vh;
}
@media screen and (max-width: 768px) {
.slideshow.banner.banner--medium {
min-height: auto;
}
}
.slideshow.banner.banner--medium img {
width: 100%;
height: auto;
}