Slider not responsive

Greetings again,

I think the issue is with the Fullscreen Slit Slider plugin. If you go to their demo site at https://tympanus.net/Tutorials/FullscreenSlitSlider/index2.html, you’ll see the same result. The image height and width styles are inline styles to allow for the background to cover the entire text region, so the image is resized to a point, and then it is just cropped.

It looks fine with the generic images they use in the demo, but for images like large portrait shots of people with no text overlay, I’m getting some really ugly cropped results.

Thanks!

I resolved this by adding some media queries to adjust the height.

Unfortunately, I had to add them to the end of the FullscreenSlitSlider css file to get them to register, so I’ll have to reapply the changes with every update, but it works.

Hello,

Sorry for the delayed response, i was not able to respond back as i was travelling and had limited internet access

Can you please post the CSS you have added ? It will help everyone if i add them to the Theme file in the next release

These are the media queries I added, but they are specific to the images I’m using on one web site. I’m not adding any slider text, so I didn’t have to worry about text overlay font size or clipping the slider text.

These could be tweaked a lot better, but I was on a hard deadline and had to get the site live.

/* Media Queries for custom slider */
/*Height proportions based on 600px defined in admin panel*/

@media screen and (max-width: 480px) and (min-width: 320px) {
.sl-slider-wrapper {
height: 246px !important;
}
}

@media screen and (max-width: 660px) and (min-width: 481px) {
.sl-slider-wrapper {
height: 338px !important;
}

.sl-slider h2 {
font-size: 28px;
}

.sl-slider blockquote {
font-size: 16px;
}
}

@media screen and (max-width: 767px) and (min-width: 661px) {
.sl-slider-wrapper {
height: 409px !important;
}
}

@media screen and (max-width: 991px) and (min-width: 768px) {
.sl-slider-wrapper {
height: 508px !important;
}
}