post slider image size

Hi,

Using custom css for your images on your post slider will stretch it out of proportion. You should use the WordPress admin -> Media To edit your image before setting as featured image for the post slider. The size is width 400 and height 280

If you want to try out Custom CSS, you can add the following codes in Theme Options-> Custom CSS

#slide_holder .featured-thumbnail img {
    height: 280px !important;
    width: 100%;
}

This is screenshot of result. https://prntscr.com/7vxjuy

Thanks!
Denzel

Thanks Denzel! Appreciate it. Is there anyway to change the size of the post slider image? Since I’m a book blogger I would like it to be higher instead of wider. let’s say 280 x 400 thanks again ??

Sorry I can’t seem to find where to start a new topic!

I was also wondering if there is a way to have two evolve carrousel sliders in the side bar? when I try the controls of the first one seem to affect the second one. Thanks

Hi,

Please remove the previous Custom CSS code and use the following.

#slide_holder .featured-thumbnail img {
    height: 400px !important;
    margin-left: 100px;
    width: 280px !important;
}

As for the carousel slider widget. You can find all instance of the id myCarousel and add a number 2 to it, such as myCarousel2 and it will be independent from the first carousel slider widget.

Use the following as an example. You will have to change the image src to your image url, because in my example, they are pointing to the images on my computer, you won’t see them.

<div id='myCarousel2' class='carousel slide' data-ride='carousel'>

<ol class='carousel-indicators'>
	<li data-target='#myCarousel2' data-slide-to='0' class='active'>
	<li data-target='#myCarousel2' data-slide-to='1'>
	<li data-target='#myCarousel2' data-slide-to='2'>
	<li data-target='#myCarousel2' data-slide-to='3'>

<div class='carousel-inner'>

<div class='item active'>
	<img src='https://localhost:8888/evolve-demo/wp-content/themes/evolve/library/media/images/slider/slider_img_01.jpg' alt='' />
	<div class='carousel-caption'>
		<h4>Built-in Bootstrap Elements and Font Awesome let you do amazing things with your website</h4>
	</div>
</div>

<div class='item'>
	<img src='https://localhost:8888/evolve-demo/wp-content/themes/evolve/library/media/images/slider/slider_img_02.jpg' alt='' />
	<div class='carousel-caption'>
		<h4>Easy to use control panel with a lot of options</h4>
	</div>
</div>

<div class='item'>
	<img src='https://localhost:8888/evolve-demo/wp-content/themes/evolve/library/media/images/slider/slider_img_03.jpg' alt='' />
	<div class='carousel-caption'>
		<h4>Fully responsive theme for any device</h4>
	</div>
</div> 

<div class='item'>
	<img src='https://localhost:8888/evolve-demo/wp-content/themes/evolve/library/media/images/slider/slider_img_04.jpg' alt='' />
	<div class='carousel-caption'>
		<h4>Unlimited color schemes</h4>
	</div>
</div>

</div><!--/.carousel-inner-->

<a href='#myCarousel2'><img src='https://localhost:8888/evolve-demo/wp-content/themes/evolve/library/media/images/left-ar.png' /></a>

<a href='#myCarousel2'><img src='https://localhost:8888/evolve-demo/wp-content/themes/evolve/library/media/images/right-ar.png' /></a>

</div><!--/#myCarousel2-->

Thanks!

Thanks Denzel! I’ll try this shortly.
btw… I mentioned you on my Weekly Wrap up today
https://www.danielaark.com/what-a-week-17-my-sliders-my-weakness/

the code for the post slider worked great ??

Hi,

Glad it worked for you.
Thank you for mentioning me in your blog!
You have got great readers too!
Wish you success as a writer!

Thanks!
Denzel