Increase Slideshow Height on Mobile - Craft Theme

Increase Slideshow Height on Mobile - Craft Theme

mokon
New Member
10 0 0

Hi! I am wondering if it's possible to increase the height of the hero slideshow on mobile and not desktop. Ideally, I'd like to be able to customize the height of both (separately). 

Screenshot 2024-02-12 at 3.42.10 PM.png

 

Site preview: https://shopgoldbug.com/?_ab=0&_fd=0&_sc=1

Replies 8 (8)

Spac-es
Shopify Partner
389 112 135

Add this code in your theme.liquid: (before the closing </body> tag)

 

<style>
/* Mobile Code */
@media (max-width: 599px) {
  .fullScreenSlider ul li .bgImage .zoomProxy {
    height: 60vh !important;
  }
  .fxInElement.fadeIn.fullScreenSlider.slickSlider.overlayFX.slider-1519232329322 {
    margin-bottom: calc(20vh - 60vh);
  }
  .fullScreenSlider-controls {
    bottom: 365px !important;
  }
}

/* Tablet Code */
@media (min-width: 600px) and (max-width: 1024px) {
  .fullScreenSlider ul li .bgImage .zoomProxy {
    height: 80vh !important;
  }
  .fxInElement.fadeIn.fullScreenSlider.slickSlider.overlayFX.slider-1519232329322 {
    margin-bottom: calc(60vh - 80vh);
  }
  .fullScreenSlider-controls {
    bottom: 195px !important;
  }
}

/* PC Code */
@media (min-width: 1025px) {
  .fullScreenSlider ul li .bgImage .zoomProxy {
    height: 100vh !important;
  }
}
</style>

 

Results:

MOBILE

 

mobile.PNG

 

TABLET

 

tablet.PNG

 

PC

 

PC.PNG

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
mokon
New Member
10 0 0

Hi - that didn't work. I am editing a drafted site with the Craft theme (the preview link I posted initially shows it). Your example screenshots are from my current live site, which uses Lorenza theme. 

Spac-es
Shopify Partner
389 112 135

The provided code will work on your current live theme. If your draft theme has a different structure, the HTML container classes may not match the classes edited in the previous code. There are two options: either set your draft theme as active or grant me access to your website to implement the changes.

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
mokon
New Member
10 0 0

The preview link (https://shopgoldbug.com/?_ab=0&_fd=0&_sc=1) is for the drafted theme - does that not provide enough access? This is a site I am working on for my employer, so I'm unable to set it site live until the revisions are made nor can I give you credentials for the Shopify account. Is there another way to grant access? 

Spac-es
Shopify Partner
389 112 135

Don't worry! Honestly, it's strange that the code isn't working in your current theme. Let's do this: add the following code to your base.css, theme.css, or stylescss.scss.css file:

.fullScreenSlider {
  height: auto !important;
}

/* Mobile Code */
@media (max-width: 599px) {
  .slick-track li {
    height: 350px !important;
  }
}

/* Tablet Code */
@media (min-width: 600px) and (max-width: 1024px) {
  .slick-track li {
    height: 500px !important;
  }
}

/* PC Code */
@media (min-width: 1025px) {
  .slick-track li {
    height: 900px !important;
  }
}

Feel free to adjust the height value as you wish; in this case, I've set it in pixels to make it easier for you, and I've simplified the code a lot, using more specific CSS classes. Hopefully, it'll work for you now!

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
mokon
New Member
10 0 0

Still nothing. 😕

Spac-es
Shopify Partner
389 112 135

It should work perfectly... Sorry for the inconvenience...

Try wrapping it in <style> tags and adding it to the theme.liquid file within the body.

<style>
.fullScreenSlider {
  height: auto !important;
}

/* Mobile Code */
@media (max-width: 599px) {
  .slick-track li {
    height: 350px !important;
  }
}

/* Tablet Code */
@media (min-width: 600px) and (max-width: 1024px) {
  .slick-track li {
    height: 500px !important;
  }
}

/* PC Code */
@media (min-width: 1025px) {
  .slick-track li {
    height: 900px !important;
  }
}
</style>

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
mokon
New Member
10 0 0

Still no change! I've triple checked that I'm inputting it correctly. Not sure where we go from here!