WordPress. How to change Parallax Slider dimensions

In this tutorial you will find out how to change Parallax Slider dimensions in WordPress.

WordPress. How to change Parallax Slider dimensions

Let’s change the dimensions of slider:

1. Use developer tool (which is firebug for Firefox in our case) to modify the CSS class:

   

   Find this code for slider, which should look like this:

   .parallax-slider { 
   height: 719px; 
   }
   

   Change the height and add !important to the end of the new code.

2. Copy the new code that you have just set. Go to Appearance->Editor to open stylesheet (style.css) file, and add that code to the bottom of this file. Then click ‘Update File‘ to save it:

   

3. Refresh Home page to check the height of slider has been changed.

Next, we will change the scaling of slides images so that they will fit the new slider dimensions.

1. Log into FTP or File manager from the server.

2. Go to ‘wp-content/themeXXXX/js‘ folder to find ‘parallaxSlider.js‘ file:

   

3. Open the file and find this code:

   objectResize($('> img', primaryImageHolder), mainImageHolder, "fill");

   You will need to change “fill” to “fit” and save the file.

Check your site to see the changes.

Feel free to check the detailed video tutorial below:

WordPress. How to change Parallax Slider dimensions