Title: Change Sidebar Widths Last modified: August 25, 2018 --- # Change Sidebar Widths * [ShannonElizabeth](https://wordpress.org/support/users/shannonelizabeth/) * (@shannonelizabeth) * [7 years, 9 months ago](https://wordpress.org/support/topic/change-sidebar-widths/) * I see this question has been asked many times before with no answers… I hope I can find an answer 🙁 * How can you change the width of the sidebars? I’d like to make them much more narrow. * [http://www.grabmypassport.com](http://www.grabmypassport.com) * Thanks! Shannon * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fchange-sidebar-widths%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 10 replies - 1 through 10 (of 10 total) * [emranemranx](https://wordpress.org/support/users/emranemranx/) * (@emranemranx) * [7 years, 9 months ago](https://wordpress.org/support/topic/change-sidebar-widths/#post-10627034) * Hi Shannon, ​ You can try taking advantage of tools such as Inspect or Firebug which can aid in customizing. These are useful 3rd party tutorials on how to go about using Inspect. ​ ​ Thank you! * [katarina8890](https://wordpress.org/support/users/katarina8890/) * (@katarina8890) * [7 years, 8 months ago](https://wordpress.org/support/topic/change-sidebar-widths/#post-10717258) * Hey Shannon, * Here’s what you need to do. If you want to change the left sidebar (sidebar 1) to something like 250px, you need to add this to custom CSS: * .sidebar.s1 { width: 250px; } * .col-3cm .sidebar.s1 { float: left; margin-left: -250px; } * .col-3cm .main-inner { padding-left: 250px; } * .content { background-color:#fff; } * If you want to make it even more narrow just change the number. * Hope this helps. * [Jesús Hernández Maíz](https://wordpress.org/support/users/jhmaiz/) * (@jhmaiz) * [7 years, 5 months ago](https://wordpress.org/support/topic/change-sidebar-widths/#post-11030259) * Muchas gracias emranemranx, me he vuelto loco para buscar cómo hacerlo, genial!! * [Jesús Hernández Maíz](https://wordpress.org/support/users/jhmaiz/) * (@jhmaiz) * [7 years, 5 months ago](https://wordpress.org/support/topic/change-sidebar-widths/#post-11030292) * ¿Cómo puedo hacer más ancha el sidebar de la derecha? pongo el mismo código pero cambiando left por right pero me descuabra Gracias * [rcouvrette](https://wordpress.org/support/users/rcouvrette/) * (@rcouvrette) * [7 years, 5 months ago](https://wordpress.org/support/topic/change-sidebar-widths/#post-11030565) * Hi Katarina and/or others, * I just saw your answer to Shannon (some 3 months ago) about how to change the left sidebar to 250px by adding to the custom css. * I would like to make the left sidebar the exact same size as the right sidebar, and I would like to do this without messing anything else up. I like my Hueman Pro! But I would prefer if the column layout for the main content were wider, and the best way to do this methinks would be to make the left sidebar narrower, i.e. the same size as the right sidebar. For me, the left sidebar is a tad too wide anyway. * If you can tell me how best to do this – I like the custom css method! – that would be greatly appreciated. * Roger. * [Jesús Hernández Maíz](https://wordpress.org/support/users/jhmaiz/) * (@jhmaiz) * [7 years, 5 months ago](https://wordpress.org/support/topic/change-sidebar-widths/#post-11030583) * jo, es cierto, descuadra la página, algo falta en el código * [j.koelb](https://wordpress.org/support/users/jkoelb/) * (@jkoelb) * [7 years, 2 months ago](https://wordpress.org/support/topic/change-sidebar-widths/#post-11424668) * Hello, I tried the method Katarina8890 mentioned and it worked but there is one problem: If the left sidebar is collapsed (in mobile view), the box is too big (overlaps the main content) and expanding the sidebar doesn’t work. my homepage: [http://www.herderschule-giessen.de](http://www.herderschule-giessen.de) * Could someone please help? * Thank you in advance * [theshulz](https://wordpress.org/support/users/theshulz/) * (@theshulz) * [6 years, 10 months ago](https://wordpress.org/support/topic/change-sidebar-widths/#post-11768082) * katarina8890 (@katarina8890) Your method works! Tell me what to change in this code, what would the right sitebar size change? left change on right? - This reply was modified 6 years, 10 months ago by [theshulz](https://wordpress.org/support/users/theshulz/). * [blenderitalia](https://wordpress.org/support/users/blenderitalia/) * (@blenderitalia) * [6 years, 9 months ago](https://wordpress.org/support/topic/change-sidebar-widths/#post-11927114) * 4you * /*——-central and more——*/ .sidebar-expanded .content { transform: translate3d( 0px, 0px, 0px) !important /*block central*/ } .sidebar { z-index:2!important }/*—- sidebar dx——-*/ [@media](https://wordpress.org/support/users/media/) only screen and (min-width: 1200px) and (max-width: 50000px) { .col-3cm .main-inner { padding- right:340px!important } .col-3cm .sidebar.s2 { margin-right:-340px!important }. sidebar.s2 { width: 340px !important }} [@media](https://wordpress.org/support/users/media/) only screen and (min-width: 480px) and (max-width: 1200px) { .sidebar.s2.expanded{ width: 340px!important; margin-right:-340px!important; transform: translate3d(- 290px, 0px, 0px) !important } .col-3cm .s2.collapsed { margin-right:-50px!important; width:50px!important }} /*——sidebar sx——*/ [@media](https://wordpress.org/support/users/media/) only screen and (min-width: 960px) and (max-width: 50000px) { .col-3cm .main- inner { padding-left:260px!important } .col-3cm .sidebar.s1 { margin-left:-260px! important } .sidebar.s1 { width:260px!important }} [@media](https://wordpress.org/support/users/media/) only screen and (min-width: 480px) and (max-width:960px) { .sidebar.s1.expanded{ width:260px!important; margin-left:-260px!important; transform:translate3d(210px, 0px, 0px) !important } .col-3cm .s1.collapsed { margin-left:-50px!important; width:50px!important }} /*——-end——*/ * [blenderitalia](https://wordpress.org/support/users/blenderitalia/) * (@blenderitalia) * [6 years, 9 months ago](https://wordpress.org/support/topic/change-sidebar-widths/#post-11927169) * Added different color sidebar1 and sidebar2 and more * /*——-central and more——*/ .sidebar-expanded .content { transform: translate3d( 0px, 0px, 0px) !important } .sidebar { z-index:2!important } .so-widget-sow-editor. so-widget-sow-editor-base { background: #262628; padding: 10px } .sidebar .widget{ padding: 13px !important } /*—-sidebar dx——-*/ .col-3cm .container-inner > .main:: after { padding-right: 340px; background: #424242; } [@media](https://wordpress.org/support/users/media/) only screen and (min-width: 1200px) and (max-width: 50000px) { .col-3cm .main- inner { padding-right:340px!important } .col-3cm .sidebar.s2 { margin-right:- 340px!important } .sidebar.s2 { width: 340px !important }} [@media](https://wordpress.org/support/users/media/) only screen and (min-width: 480px) and (max-width: 1200px) { .sidebar.s2.expanded{ width: 340px!important; margin-right:-340px!important; transform: translate3d(- 290px, 0px, 0px) !important } .col-3cm .s2.collapsed { margin-right:-50px!important; width:50px!important } .s2.expanded { background-color: #424242 }} /*——sidebar sx——*/ .s1.expanded .post-nav, .s1.expanded .sidebar-content { opacity: 1; min- width: 260px } [@media](https://wordpress.org/support/users/media/) only screen and (min-width: 960px) and (max-width: 50000px) { .col-3cm .main-inner { padding- left:260px!important } .col-3cm .sidebar.s1 { margin-left:-260px!important } . sidebar.s1 { width:260px!important }} [@media](https://wordpress.org/support/users/media/) only screen and (min-width: 480px) and (max-width:960px) { .sidebar.s1.expanded{ width:260px!important; margin-left:-260px!important; transform:translate3d(210px, 0px, 0px) !important } .col-3cm .s1.collapsed { margin-left:-50px!important; width:50px!important } .s1.expanded { background-color: #1e1d1d }} /*——-end——*/ Viewing 10 replies - 1 through 10 (of 10 total) The topic ‘Change Sidebar Widths’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/hueman/3.7.27/screenshot.png) * Hueman * [Support Threads](https://wordpress.org/support/theme/hueman/) * [Active Topics](https://wordpress.org/support/theme/hueman/active/) * [Unresolved Topics](https://wordpress.org/support/theme/hueman/unresolved/) * [Reviews](https://wordpress.org/support/theme/hueman/reviews/) ## Tags * [sidebar](https://wordpress.org/support/topic-tag/sidebar/) * 10 replies * 8 participants * Last reply from: [blenderitalia](https://wordpress.org/support/users/blenderitalia/) * Last activity: [6 years, 9 months ago](https://wordpress.org/support/topic/change-sidebar-widths/#post-11927169) * Status: not resolved