Slider Images distorted.

Why are my slider images being distorted when viewed on mobile devices?
It can be seen at granitefallswa.newlightdp.com

 

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

Code:

@media only screen and (max-width: 767px) and (min-width: 480px)
#featured {
height: 260px;}
 
@media only screen and (max-width: 480px)
#featured {
height: 172px;}

 

Okay, I pasted it into the Custom CSS. But when I look at it on my mobile device,
it still shows that it's stretched/distorted.

 

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

Code:

@media only screen and (max-width: 767px) and (min-width: 480px){
#featured {
height: 260px;
}
}
 
@media only screen and (max-width: 480px){
#featured {
height: 172px;
}
}

This will solve your issue.