{"id":11687,"date":"2011-05-02T07:37:02","date_gmt":"2011-05-02T11:37:02","guid":{"rendered":"http:\/\/info.template-help.com\/?p=11687"},"modified":"2013-05-14T12:49:17","modified_gmt":"2013-05-14T16:49:17","slug":"html-based-how-to-change-columns-width","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/html-based-how-to-change-columns-width.html","title":{"rendered":"JS Animated. How to change columns width"},"content":{"rendered":"<a href=\"http:\/\/www.youtube.com\/watch?v=2qbNcdog9KQ?width=1280&amp;height=720\" rel=\"prettyPhoto\">JS Animated. How to change columns width<\/a>\r\n\r\n<p>This tutorial will show you how to change the columns width in  JavaScript animated template.<\/p>\r\n<p>Open your .html file with Adobe Dreamweaver software or any other HTML editor.  <\/p>\r\n<p>Use <strong>Live View<\/strong> and <strong>Split <\/strong>modes.<\/p>\r\n\r\n<a href=\"\/help\/wp-content\/uploads\/2011\/11\/column_width_1.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2011\/11\/column_width_1-300x49.png\" alt=\"\" title=\"column_width_1\" width=\"300\" height=\"49\" class=\"alignnone size-medium wp-image-29042\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/column_width_1-300x49.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/column_width_1-150x24.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/column_width_1.png 645w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\r\n<p>Use <strong>&#8216;Inspect&#8217;<\/strong> button to find the needed html code for the column you need.<\/p>\r\n\r\n<a href=\"\/help\/wp-content\/uploads\/2011\/11\/column_width_2.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2011\/11\/column_width_2-300x49.png\" alt=\"\" title=\"column_width_2\" width=\"300\" height=\"49\" class=\"alignnone size-medium wp-image-29043\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/column_width_2-300x49.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/column_width_2-150x24.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/column_width_2.png 645w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\r\n<p> Selecting  the needed block, <\/p>\r\n\r\n<a href=\"\/help\/wp-content\/uploads\/2011\/11\/column_width_4.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2011\/11\/column_width_4-300x246.png\" alt=\"\" title=\"column_width_4\" width=\"300\" height=\"246\" class=\"alignnone size-medium wp-image-29044\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/column_width_4-300x246.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/column_width_4-150x123.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/column_width_4.png 506w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\r\n<p>you will see  the html code.  It begins with a &quot;span&quot; class.  <\/p>\r\n\r\n<a href=\"\/help\/wp-content\/uploads\/2011\/11\/column_width_3.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2011\/11\/column_width_3-222x300.png\" alt=\"\" title=\"column_width_3\" width=\"222\" height=\"300\" class=\"alignnone size-medium wp-image-29045\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/column_width_3-222x300.png 222w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/column_width_3-111x150.png 111w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/column_width_3.png 464w\" sizes=\"(max-width: 222px) 100vw, 222px\" \/><\/a>\r\n\r\n<p>Most of the templates use 12 column layout. Change the span digit (from 1 to 12) in order to change column width.<\/p>\r\n\r\n<p>Now your website columns have different width and it works properly.<\/p>\r\n\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=2qbNcdog9KQ?width=1280&amp;height=720\" rel=\"prettyPhoto\">JS Animated. How to change columns width<\/a>","protected":false},"excerpt":{"rendered":"<p>This tutorial will show you how to change the columns width in JavaScript animated template.<\/p>\n","protected":false},"author":29,"featured_media":29046,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1016,253],"tags":[656,514,2411,517,1097],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/11687"}],"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\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=11687"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/11687\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/29046"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=11687"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=11687"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=11687"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}