# Home Page Flex Slider Cropping

**URL:** <https://colorlibsupport.com/t/home-page-flex-slider-cropping/16580>\
**Category:** Activello\
**Created:** [June 13, 2017, 8:33pm UTC](https://colorlibsupport.com/t/home-page-flex-slider-cropping/16580 "2017-06-13T20:33:11Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![jish](https://colorlibsupport.com/user_avatar/colorlibsupport.com/jish/32/1291_2.png) [@jish](https://colorlibsupport.com/u/jish)\
**Post date:** [June 13, 2017, 8:33pm UTC](https://colorlibsupport.com/t/home-page-flex-slider-cropping/16580/1 "2017-06-13T20:33:11Z")

</div>

Hi,  
So the slider seems to takes the post’s feature image and ends up cropping some of the image out when it is displayed. This even happens when i used some other forum tips you guys gave (Code below does increase the height but stretches images out for me) I was wondering if i could increase the height and not stretch the image out. if not I can probably edit my feature images and add some extra space above or below to make it fit nicely.

.flexslider {  
height: 350px!Important;  
}

.flexslider .slides img {  
max-height: 350px!Important;  
}

.flexslider .slides {  
height: 350px!Important;  
}

img.attachment-activello-slider.size-activello-slider.wp-post-image {  
height: 350px!Important;  
}

li.flex-active-slide {  
height: 350px!Important;  
}

---

<div class="post-metadata">

**Author:** ![mikesupport17](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/bc8723/32.png) [@mikesupport17](https://colorlibsupport.com/u/mikesupport17)\
**Post date:** [June 13, 2017, 10:44pm UTC](https://colorlibsupport.com/t/home-page-flex-slider-cropping/16580/2 "2017-06-13T22:44:18Z")

</div>

Hey there,  
I hope you’re doing well today

It would be best to edit my feature images to achieve the desired results,

You’ll need to adjust the width as well as the height to keep the images proportionate.

```auto
/*Adjust Slider */
.flexslider {
height: 350px!Important;
}
.flexslider .slides img {
max-height: 550px!Important;
  width:105%
}
.flexslider .slides {
height: 350px!Important;
width:105%
}
img.attachment-activello-slider.size-activello-slider.wp-post-image {
height: 350px!Important;
}
li.flex-active-slide {
height: 300px!Important;
}

```

You can adjust the width to your preference to get it to your liking.

Best Regards,  
Support

---

<div class="post-metadata">

**Author:** ![jish](https://colorlibsupport.com/user_avatar/colorlibsupport.com/jish/32/1291_2.png) [@jish](https://colorlibsupport.com/u/jish)\
**Post date:** [June 14, 2017, 9:48pm UTC](https://colorlibsupport.com/t/home-page-flex-slider-cropping/16580/3 "2017-06-14T21:48:22Z")

</div>

Thankyou for the response! I will mess around with it .

---

<div class="post-metadata">

**Author:** ![jish](https://colorlibsupport.com/user_avatar/colorlibsupport.com/jish/32/1291_2.png) [@jish](https://colorlibsupport.com/u/jish)\
**Post date:** [June 19, 2017, 9:12pm UTC](https://colorlibsupport.com/t/home-page-flex-slider-cropping/16580/4 "2017-06-19T21:12:23Z")

</div>

Hello Again,  
My issue now is that the image in the slider images are getting chopped at the sides.  
I am hoping you can help me fix this so no matter the size of the screen the slider shows the full image.  
Below is the link to the site i am working on:

> **[Box Sock | The Pocket Sock That Hides Your Engagement Ring Box](https://www.theboxsock.com/)**
>
> Each pocket sock design has a slim ring box and a hidden pocket to easily keep your small engagement ring box hidden. The pocket’s elasticity discreetly carries the ring box is comfortably removed when proposer gets down on one knee. Keeping the...

Thank you ahead of time!

---

<div class="post-metadata">

**Author:** ![movin](https://colorlibsupport.com/user_avatar/colorlibsupport.com/movin/32/10922_2.png) [@movin](https://colorlibsupport.com/u/movin)\
**Post date:** [June 23, 2017, 11:58am UTC](https://colorlibsupport.com/t/home-page-flex-slider-cropping/16580/5 "2017-06-23T11:58:56Z")

</div>

If you do not want slider images to crop then please use the custom plugin solution shared in the following topic.

[https://colorlibsupport.com/t/increase-slider-height/#post-66716](https://colorlibsupport.com/t/increase-slider-height/#post-66716)