Known Issue: Sidebar Width

  • Resolved Halil ESEN

    (@halilesen)


    3 years, 1 month ago

    I opened this issue before. But we could not get a complete result. I want to ask again. But I will ask in a different way. Because this can help many people.

    I think one of the problems of this theme is that we can’t adjust the sidebar width. Because the sidebars can be too small or wide depending on the situation.

    I want a layout like this: https://i.hizliresim.com/96l4jfy.jpg

    Right sidebar – Wide

    The content section should be 650px wide, the spacing 20px and the sidebar 300px wide. I want the gray line to none.

    The total width is 970px. But I have to set the site width to 1028px in Customizer to get this width. I think it’s because of the gaps on the sides surrounding the site. They should also be taken into account.

    With love.

Viewing 13 replies - 1 through 13 (of 13 total)
  • Thread Starter Halil ESEN

    (@halilesen)

    Please tell me it’s possible.

    Theme Author Ben Sibley

    (@bensibley)

    This feature is more complex than it seems, so I probably won’t be adding it into MN unless there is a lot more demand for it.

    That said, it is not that complex to write some CSS to make these specific changes for one website. If you can link me to a page on your site where you want this change, I can help you with that.

    Thread Starter Halil ESEN

    (@halilesen)

    I understand. Again thank you for your support.

    I want to make this layout I mentioned on this site: https://obelde.com/

    Theme Author Ben Sibley

    (@bensibley)

    Sure, no problem.

    This should work well, but let me know if anything needs a little tweaking. Once you add this code, you’re going to see that there is a bit of a gap between the main content and the sidebar because the site will still be 1028px but without the extra padding on the sides. You can change the site width value to 970px in the Customizer and that will remove the gap and make it exactly 970px wide.

    @media all and (min-width: 1000px) {

  #main,
  #loop-container {
    margin-left: 0 !important;
  }
  #main {
    width: 650px;
    padding: 0 !important;
  }
  #loop-container {
    width: 100% !important;
  }
  .content-container:after {
    display: none;
  }
  .sidebar-right {
    width: 300px;
    padding: 0;
    margin: 0;
  }
  .site-header {
    padding-left: 0;
    padding-right: 0;
  }
  .widget-area-below-header, 
  .widget-area-above-main {
    padding: 0;
  }
}
    Thread Starter Halil ESEN

    (@halilesen)

    Yes, it worked great. Thank you so much.

    Only page types with other layouts have broken down. Maybe I should do all the same. For example, the pages were full width. Here: https://obelde.com/app/

    Theme Author Ben Sibley

    (@bensibley)

    Okay cool. Please add the following CSS as well, and it will center the content on your pages without a sidebar:

    @media all and (min-width: 1000px) {

  .layout-no-sidebar-wide #loop-container {
    left: 0 !important;
  }
  .layout-no-sidebar-wide #main {
    margin: 0 auto !important;
    float: none !important;
  }
}
    Thread Starter Halil ESEN

    (@halilesen)

    I guess it didn’t work or I did something wrong. The code has been added: https://obelde.com/app/

    Theme Author Ben Sibley

    (@bensibley)

    Sorry, small typo in the code. I’ve updated the layout class and it should work now.

    Please replace the prior snippet with the following:

    @media all and (min-width: 1000px) {

  .layout-no-sidebar-full-width #loop-container {
    left: 0 !important;
  }
  .layout-no-sidebar-full-width #main {
    margin: 0 auto !important;
    float: none !important;
  }
}
    Thread Starter Halil ESEN

    (@halilesen)

    I’m afraid to keep you busy. But this time it was not full width. If it’s not possible, I don’t want to force it.

    Theme Author Ben Sibley

    (@bensibley)

    It’s okay. Just a little tricky to get right with the variations.

    It looks like there is only one more change needed. I’ve added a width property for the #main element and that should allow it to expand on your wide layout pages. You can copy this entire snippet or just add the width: 100% !important line to your existing code.

    @media all and (min-width: 1000px) {

  .layout-no-sidebar-full-width #loop-container {
    left: 0 !important;
  }
  .layout-no-sidebar-full-width #main {
    margin: 0 auto !important;
    float: none !important;
    width: 100% !important;
  }
}
    Thread Starter Halil ESEN

    (@halilesen)

    thank you so much. It works.

    Thread Starter Halil ESEN

    (@halilesen)

    I think putting the sidebar width feature at least in the Pro version might make it more appealing. Thanks a lot again.

    Theme Author Ben Sibley

    (@bensibley)

    Glad to hear it! I will definitely consider adding it. Thanks for the feedback.

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Known Issue: Sidebar Width’ is closed to new replies.