JS Animated. How to change the parallax block dimensions

In this tutorial we will show you how to change the dimensions of the parallax block.

The block can be added with the help of css or directly with the HTML code. We will take a closer look at the first way.

The width and height of the parallax block are defined by the dimensions of the container it is added to. The dimensions can be changed directly in a css file.

1. Use the Firebug or some other developer tool in order to inspect the container ID of the parallax block and the exact line and location of the css file for editing.

   

2. In order to reduce height, you need to edit or delete the paddings, added to this container, this way the responsiveness of the block will not be affected.

3. To make the with smaller, add a width property with a value less than 100%, and also correct the position of the block adding some margin. For example:

   .bg-image-3 {
   margin: 0 auto;
   width: 80%;
   }

4. Find the style.css file, located in the css folder on your server, and open it with some text editor (or edit the file on your computer, and then re-upload it to your server).

   

5. Perform the changes that you tried with the Firebug tool, and save the file.

6. Check your changes on the site front end after refreshing the page.

Take your time to check out the collection of Website Themes with Parallax Scrolling Effect.

We hope the tutorial was useful for you. Feel free to check the detailed video tutorial below: