{"id":65526,"date":"2016-05-26T09:44:49","date_gmt":"2016-05-26T13:44:49","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=65526"},"modified":"2016-08-08T04:28:30","modified_gmt":"2016-08-08T08:28:30","slug":"monstroid-how-to-change-sidebar-width","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/monstroid-how-to-change-sidebar-width.html","title":{"rendered":"Monstroid. How to change sidebar width"},"content":{"rendered":"<p>Our Support team is ready to present you a new tutorial that shows how to change sidebars width in <a href=\"https:\/\/www.templatemonster.com\/templates.php?pr=50125-61529-190017\"title=\"Monstroid WordPress Themes\">Monstroid themes<\/a>.<\/p>\r\n<div class=\"video-container\">\r\n\t<iframe src=\"https:\/\/www.youtube.com\/embed\/M9QzBIelOOM\"><\/iframe>\r\n<\/div>\r\n\r\n<p>There are 3 sidebars that are usually used for pages with the sidebar: <strong>Main Sidebar<\/strong> , <strong>Secondary Sidebar<\/strong> and <strong>Custom sidebar<\/strong>:<\/p>\r\n<a href=\"\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_1.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_1-300x243.png\" alt=\"monstroid_how_to_change_sidebars_width_1\" width=\"300\" height=\"243\" class=\"aligncenter size-medium wp-image-65527\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_1-300x243.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_1-150x122.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_1.png 938w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\r\n         <h3 class=\"custom\">Main Sidebar<\/h3>\r\n<a href=\"\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_2.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_2-300x172.png\" alt=\"monstroid_how_to_change_sidebars_width_2\" width=\"300\" height=\"172\" class=\"aligncenter size-medium wp-image-65528\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_2-300x172.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_2-150x86.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_2-1024x586.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_2.png 1258w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n         <ol>\r\n              <li><p>Inspect the sidebar with the <a target=\"_blank\" href=\"\/help\/developer-tools.html\">developer tools<\/a> to locate the css rule for sidebar width:<\/p>\r\n\r\n<a href=\"\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_3.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_3-300x224.png\" alt=\"monstroid_how_to_change_sidebars_width_3\" width=\"300\" height=\"224\" class=\"aligncenter size-medium wp-image-65529\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_3-300x224.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_3-150x112.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_3.png 1013w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/li>\r\n              <li><p>Copy the code to <strong>Cherry > User Css<\/strong> section and change the width value, save changes:<\/p>\r\n\r\n<a href=\"\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_4.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_4-300x76.png\" alt=\"monstroid_how_to_change_sidebars_width_4\" width=\"300\" height=\"76\" class=\"aligncenter size-medium wp-image-65530\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_4-300x76.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_4-150x38.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_4-1024x259.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_4.png 1251w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/li>\r\n\t          <li><p>Then you will need to change the width of the content section in same way, make sure content and sidebar can fit in one row:<\/p>\r\n<a href=\"\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_5.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_5-300x166.png\" alt=\"monstroid_how_to_change_sidebars_width_5\" width=\"300\" height=\"166\" class=\"aligncenter size-medium wp-image-65531\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_5-300x166.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_5-150x83.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_5-1024x568.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_5.png 1277w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/li>\r\n\t          <li><p>After changing the sidebar and content width, you will also need to change the location of divider: <\/p>\r\n\r\n<a href=\"\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_6.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_6-300x143.png\" alt=\"monstroid_how_to_change_sidebars_width_6\" width=\"300\" height=\"143\" class=\"aligncenter size-medium wp-image-65532\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_6-300x143.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_6-150x72.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_6-1024x489.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_6.png 1258w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/li>\r\n\t          <li><p>Inspect the element with the developer tool and change the css rule to move the divider to correct location:<\/p>\r\n\r\n<a href=\"\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_7.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_7-300x175.png\" alt=\"monstroid_how_to_change_sidebars_width_7\" width=\"300\" height=\"175\" class=\"aligncenter size-medium wp-image-65533\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_7-300x175.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_7-150x87.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_7.png 1002w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/li>\r\n\t          <li><p>Since the sidebar is displayed under content on devices with width less than 992px, you will also need to change the sidebar width to 100% for such devices. Use the same sidebar css code with a media query and change the width to 100%. Your code should look like the following: <\/p>\r\n\t            <pre class=\"brush:css\">@media (max-width:992px){\r\n.sidebar-content-wrapper .cherry-sidebar-main.widget-area, .content-sidebar-wrapper .cherry-sidebar-main.widget-area {\r\nwidth: 100%;\r\n}\r\n}<\/pre><\/li>\r\n\t <li><p>Save your custom css codes in <strong>Cherry > User CSS<\/strong> section and check the result on your website:<\/p>\r\n\r\n<a href=\"\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_8.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_8-300x150.png\" alt=\"monstroid_how_to_change_sidebars_width_8\" width=\"300\" height=\"150\" class=\"aligncenter size-medium wp-image-65534\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_8-300x150.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_8-150x75.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_8-1024x513.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_8.png 1211w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/li>\r\n\t <\/ol>\r\n   \r\n\t    <h3 class=\"custom\">Secondary Sidebar<\/h3>\r\n<a href=\"\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_9.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_9-300x148.png\" alt=\"monstroid_how_to_change_sidebars_width_9\" width=\"300\" height=\"148\" class=\"aligncenter size-medium wp-image-65535\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_9-300x148.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_9-150x74.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_9-1024x504.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_9.png 1220w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\t\t<ol>\r\n\t\t   <li><p>You will need to locate and modify the width for the secondary sidebar with the help of <a target=\"_blank\" href=\"\/help\/developer-tools.html\">developer tools<\/a> if you need separate styles for it. Content width, location of divider and sidebar width on mobile devices are defined in the same way for all sidebars.<\/p><\/li>\r\n\t\t   <li><p>Your code for secondary sidebar width will look like the following:<\/p>\r\n\t\t       <pre class=\"brush:css\">.cherry-sidebar-main.sidebar-secondary.widget-area {\r\nwidth: 25% ;\r\n}<\/pre>\r\n\t\t   <\/li>\r\n\t\t<\/ol>\r\n   \r\n\t<h3 class=\"custom\">Custom Sidebar<\/h3>\r\n<a href=\"\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_10.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_10-300x149.png\" alt=\"monstroid_how_to_change_sidebars_width_10\" width=\"300\" height=\"149\" class=\"aligncenter size-medium wp-image-65536\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_10-300x149.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_10-150x74.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_10-1024x509.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/03\/monstroid_how_to_change_sidebars_width_10.png 1182w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\t<ol>\r\n\t\t   <li><p>You will need to locate and modify the width for the custom sidebar with the help of <a target=\"_blank\" href=\"\/help\/developer-tools.html\">developer tools<\/a> if you need separate styles for it. Content width, location of divider and sidebar width on mobile devices are defined in the same way for all sidebars.<\/p><\/li>\r\n\t\t   <li><p>Your code for custom sidebar width will look like the following:<\/p>\r\n\t\t       <pre class=\"brush:css\">.cherry-sidebar-main.cherry-sidebar-manager-0.widget-area {\r\nwidth: 20%;\r\n}   <\/pre>\r\n\t\t   <\/li>\r\n\t\t<\/ol>\r\n\t\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=M9QzBIelOOM?width=1280&amp;height=720\" rel=\"prettyPhoto\">Monstroid. How to change sidebar width<\/a>","protected":false},"excerpt":{"rendered":"<p>Our Support team is ready to present you a new tutorial that shows how to change sidebars width in Monstroid.<\/p>\n","protected":false},"author":56,"featured_media":65538,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2017],"tags":[2019,655,1097],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/65526"}],"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\/56"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=65526"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/65526\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/65538"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=65526"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=65526"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=65526"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}