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).
Site preview: https://shopgoldbug.com/?_ab=0&_fd=0&_sc=1
Topic summary
A user seeks to independently adjust the hero slideshow height on mobile versus desktop in the Craft theme. They provided a preview link to their drafted site.
Attempted Solutions:
- Initial JavaScript code targeting
.slick-track lielements was provided to add inline styles for different breakpoints (mobile: 350px, tablet: 500px, PC: 900px) - When that failed, simplified CSS code was suggested for addition to base.css, theme.css, or style.scss.liquid files
- A third attempt wrapped the CSS in
<style>tags within theme.liquid before the closing</body>tag
Current Status:
The issue remains unresolved. Despite multiple troubleshooting attempts and triple-checking implementation, none of the proposed code modifications have produced any visible changes. The helper acknowledged the situation is unusual and apologized for the inconvenience, but no working solution has been identified yet.
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.
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.
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?
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!
Still nothing. 
It should work perfectly… Sorry for the inconvenience…
Try wrapping it in tags and adding it to the theme.liquid file within the body.
Still no change! I’ve triple checked that I’m inputting it correctly. Not sure where we go from here!