Adjust slider images fitting in slider frame in mobile view

Hi! Looking through this forum I was able to find instruction on how to:

1) Remove Ken Burns effect on slider
2) Make my images the optimal size to work in slider with Ken Burns removed ("If you are not using animation in the slider, dimensions images 1100 x 516 pixels really good look.")

Now the slider looks perfect on the Desktop. But in Mobile view the images are not centering in the frame. They are slightly elevated, raised up too high. This is causing a margin to appear below them, within the slider frame. Is there a way to adjust this?

http://dev.dfwvetsurgeons.com

 

Hi,

Greetings from InkThemes!

Please paste the code given below in Custom CSS field of your dashboard.

Code:

@media only screen and (max-width: 480px){
.sy-slide > a > img {
    margin: 0;
    width: 100%;
    height: auto;
}
}

Hope it will resolve your issue

Thanks & Regards!
Priyanka
InkThemes.com

 

Thank you for this. The CSS actually made the problem worse. Making the images appear as 100% (width: 100% within the slider also made the white gap (margin) at the bottom of the image but before the slider frame began even bigger. I experimented and made the images 120%. They are getting cut off slightly but that is better then a huge white gap between the edge of the image and the frame. I know this is not the correct fix but it works for now.