Slider images responsive? Make them fit to slider area size?

Hi: This is a great theme. Having a problem with the slider though. In Home Slider Settings, directions are to make images 1250 px wide x 520 px height. I want my slider to take less space (same width but less tall) so I changed the CSS to 350 px instead of 520 px. I then made my slider JPEG images 1250 x 350. But when I upload them into the slider, they are all cut off on the right and a bit at the bottom too. Is there a way for the slider to automatically resize images proportionally to fit into the width of the slider area specified? Thanks for your help!
Site: DMediaPromo.com
First slider image: http://www.dmediapromo.com/wp-content/uploads/slide_beach-promotional-products.jpg

 

PS: I noticed slider images are not responsive in the mobile view either. Nor is the site's logo. Is there a way to change this?

 

Hello,

Paste this code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

.sl-slider-wrapper img {
max-width: 100%;
}
div.logo img {
max-width: 100%;
} 

This will solve your issue.


Thanks & Regards
Gourav Shrivastava

 

Thanks, Gourav. It worked, kind of. Not the way I envisioned. Now the images are no longer cut off horizontally (yay!) but they are stretched or smushed (distorted) depending on the size of the screen. Is there a way to have the image fit 100% width (not distorted), regardless of the size of the screen, but then be the height of whatever it ends up being---whether that is shorter or taller than 350 pixels? Not sure I am explaining myself correctly but I've worked with several other sliders and never had a problem with the images "auto-fitting" into the slider space, then responsively get smaller for mobile or smaller screens.

And another question: what size should I make my slider images so they will be proportionately correct for the width of the slider space but not as tall as the demo?

 

Hello,

The recommended dimimension for slider image is 1250 px wide x 520 px height.

Use recommended dimension image for your slider, it will look fine.


Thanks & Regards
Gourav Shrivastava

 

That wasn't exactly what I needed; I want to make the slider images less tall, around 350 pixels instead of 520. But I figured it out on my own:

/* slider height 520px to 350px */
.sl-slider-wrapper {
height: auto;
display: block;
min-height: 350px;
height: 350px;
margin: 0 auto;
position: relative;
overflow: hidden;
}

element.style {
width: 1250px;
height: 350px;
}

/* slider make images responsive */
.sl-slider-wrapper img {
max-width: 100%;
max-height: 100%;
}

/* slider remove description */
.salesdetails{
display:none;
}

You can close this thread now. Thanks!