[Theme Evolve] Bootstrap Slider Images Size

Hi there,

Thanks for writing in,

Upon checking, the image sizes are too high into your slider, so you should use small images into your slides. Meanwhile, you can resolve for temporary by a custom code. You can try the following code under Appearance > Theme Options > custom CSS:

img.img-responsive {
  max-height: 500px !important;
  min-height: 485px;
}

For displaying parallax slider, so you can enable it by going to Appearance > Theme Options > Parallax slider > Parallax slider placement as per shown here: https://prntscr.com/7v8u9p.

Thanks.

Thanks Emran bhai, for taking a look at my site. The images are all squished after I added this code. What should be the ideal size of the images for the bootstrap slider.

Thanks for the tip on Parallax slider, is there a site where this feature is implemented. I generally use Cyclone Slider to create slideshows of images.

jfambrini : the solution above must work well and good for the image height. just replace the max height with the height of your choice…

Thanks Curious Mind. Since the images are being squished, If I know the dimensions the program was designed in mind with, I could resize the images in an image editing program. The css code is squishing not just the images in the slider but also images.

Hi,

You are correct.

That Custom CSS code affects all images on the home page.
You should remove it.

There is a width 100% and height auto for the bootstrap slider image on your homepage, it is located in custom_css.php

This means, it will auto resize your image to the size of the wrapper, which is 1200px and the height is automatically preserved by the browser.

Hope this helps.

Thanks!

Thanks Denzel for coming to rescue on this issue as well, have removed the code and images are no longer squished.

I gather you are referring to
$evolve_width_px = evolve_get_option(‘evl_width_px’, ‘1200’);

Can I create a child theme and then only change this to perhaps 600px?

Hi,

The smallest width in our theme is 800px via Theme Options-> General -> Layout Width
Anything smaller than that is not tested and I cannot confirm if any element’s styling will be affected.

Thanks!
Denzel

Thanks Denzel, tried that but it does not reduce height enough to be able to see both the slider and top of the article. Maybe, I will try changing the size of the images in an image editing program.

Thanks again for the all help, will close the discussion as resolved. One parting question, is it possible to replace header slider with a slider created in Cyclone Slider as I can then set height and width in it.

Sorry for delay, by the way jfambrini,i have tried with different size images and the code works fine. hope you are following the exact steps for setting custom css…
the code..
img.img-responsive {
max-height: 500px !important;
min-height: 485px;
}
This in custom css will have to do the work. all you need to do is change the size as follows..
img.img-responsive {
max-height: 290px !important;
min-height: 200px;
}

or any size you need.

Thanks Curious Mind, the problem is that it is changing all the images on the page not just images in the slider.

Kindly assist me as my images are not saved / displayed in evolve bootstrap.
https://zanejvr.hsjvanrensburg.com

Regards,

Hein