JS Animated. How to prevent slide images from being cut off on the mobile views

This tutorial shows how to change slides dimensions in JS Animated templates for mobile devices so that the images will keep their natural ratio and therefore won’t be cut off at the edges.

By default, slides will get cut off at the right and left edges when viewed on small devices to make the slider height as big as possible:

Simple CSS modification cat make them appear with the natural Width/Height ratio.

In order to change the slide dimensions for mobile devices, you should perform the following:

1. Open up the css/camera.css.js file and scroll down to the very bottom.

2. Add the following code that will change the image dimensions for mobile devices and position them correctly inside the slider:

   			@media (max-width: 768px) {
   			.slider img {
   			width: 100% !important;
   			height: auto !important;
   			margin-left: 0 !important;
   			}
   			}
   		

3. Add the following code that will change the height of the slider to remove the free space under the slides:

   			@media (max-width: 479px) {
   			.camera_wrap {
   			height: 126px !important;
   			}
   			}
   		

4. Save the changes in the css/camera.css.js file and upload it to the server.

   The result should look like this:

   

Feel free to check the detailed video tutorial below: