JS Animated. How to edit screen resolution dependent styles

This tutorial is going to show you how to edit screen resolution dependent styles on a JS Animated template.

If your template is Responsive JS Animated/Bootstrap, it comes with different styles dependent on different screen resolution. If you need to edit them:

1. We suggest that you use the Mozilla Firefox web browser with Firebug installed.
2. Go to the ‘site’ folder of your template and open the index.html file in Firefox.
3. In Firefox go to Tools -> Web Developer -> Responsive Design View (or just hit Ctrl + Shift + M):

4. The drop-down list of the resolutions available allows you to  check  how your template looks at  them.

5. If you want to change something in .css on your site at a particular screen resolution, use Firebug to search  for the necessary  file name, its location and the line to make the changes to. It is going to be the style.css  file located in the ‘site/css’ folder of your template and the line is going to be one under the RESPONSIVE LAYOUTS in it. Firebug will allow you to identify the exact line number and to try making changes before you are going to apply them to .css.

Feel free to check the detailed video tutorial below: