{"id":29740,"date":"2013-07-17T06:14:58","date_gmt":"2013-07-17T10:14:58","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=29740"},"modified":"2015-09-17T07:42:50","modified_gmt":"2015-09-17T11:42:50","slug":"js-animated-how-to-edit-screen-resolution-dependent-styles","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/js-animated-how-to-edit-screen-resolution-dependent-styles.html","title":{"rendered":"JS Animated. How to edit screen resolution dependent styles"},"content":{"rendered":"

This tutorial is going to show you how to edit screen resolution dependent styles on a JS Animated template.<\/p>\r\n\r\nJS Animated. How to edit screen resolution dependent styles<\/a>\r\n\r\n

If your template is Responsive JS Animated\/Bootstrap, it comes with different styles\u00a0dependent on different screen resolution. If you need to edit them: <\/p>\r\n

    \r\n
  1. We suggest that you use the Mozilla Firefox web browser with Firebug <\/a>installed.<\/li>\r\n
  2. Go to the ‘site’ folder of your template and open the index.html file in Firefox.<\/li>\r\n
  3. In Firefox go to Tools -> Web Developer -> Responsive Design View<\/strong> (or just hit Ctrl + Shift + M):<\/li>\r\n\r\n\"\"<\/a>\r\n\r\n
  4. The drop-down list of the resolutions available allows you to\u00a0 check\u00a0 how your template looks at\u00a0 them.<\/li>\r\n\r\n\"\"<\/a>\r\n\r\n
  5. If you want to change something in .css on your site at a particular screen resolution, use Firebug to search\u00a0 for the necessary\u00a0 file name, its location and the line to make the changes to. It is going to be the style.css\u00a0 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.<\/li>\r\n\r\n\"\"<\/a>\r\n\r\n<\/ol>\r\n\r\n

    Feel free to check the detailed video tutorial below:<\/p>\r\n\r\nJS Animated. How to edit screen resolution dependent styles<\/a>","protected":false},"excerpt":{"rendered":"

    This tutorial is going to show you how to edit screen resolution dependent styles on a JS Animated template.<\/p>\n","protected":false},"author":30,"featured_media":29748,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1016],"tags":[1524,1048,1523,899,1525],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/29740"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/30"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=29740"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/29740\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/29748"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=29740"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=29740"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=29740"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}