Troubles resizing slideshow on Shopify css - css

Question

I am having troubles resizing the slideshow on my Shopify css.
This is the code
/* Slider */
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
I am using the boost theme,
I have tried toggling height and weight with these arguments:
height: 50%
width: 50%
and
max-height:50%
but to no avail. I would like to halve the height and width of my slider

Answer 1

I took a look at your source code, and if you're referring to the main homepage carousel, it looks like your slider is wrapped in the following div:
<div class="full-width relative js-slideshow-section slick-initialized slick-slider slick-dotted" data-autoplay="true" data-autoplayspeed="8000">
The full-width class applies the following CSS rule in your theme.scss.css:
.full-width {
min-width: 100%;
}
Your CSS rules are being ignored because of selector specificity. Either replace the class full-width or if you want to change the size based on viewport size, consider adding a media query that overrides those rules.
If you'd like to reduce the height of your carousel, consider styling, not the slider container itself, but each individual slide. The following CSS would adjust the slider width to 50%, center it with margin rules, and adjust the height of slides with a class of .slide-heightchange to 400px:
/* Slide container */
.full-width.adjusted-width {
width: 50%;
margin-left: auto;
margin-right: auto;
}
/* Individual slide */
.slide-adjusted-height {
height: 400px;
}
Note that I added the adjusted-width class to your carousel container selector. This, together with the full-width class will create a more specific CSS selector that should apply the rule. However, for semantic purposes you may consider renaming the full-width class or removing it altogether with JavaScript on resize. Also, the width: 50%; rule will change the width size based on the containing block size. You may want to consider a different width rule.
Related info
It looks like your Shopify theme is using the Slick library for the slider. The documentation and sample usage can be found at http://kenwheeler.github.io/slick/
As the docs explain, your slide divs are placed inside of a div container that is then used to initialize the carousel.
Something else that might be useful is configuring the slider's JS settings. The Slick library has adaptiveHeight and variableWidth settings that both default to false. They allow you to configure the behavior of your carousel when dealing with slides of different heights and widths.