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

SNK1986
Visitor
2 0 1

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?

 

Replies 3 (3)

ThePrimeWeb
Shopify Partner
2138 614 488

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;
  }
}
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
SNK1986
Visitor
2 0 1

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
Shopify Partner
190 31 48

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;
}
Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!