Support » Theme: Emmet Lite » How to adjust width of sidebar/widget

  • Resolved ninda

    (@ninda)


    Hi,

    I’d like to change the width of the sidebar so that my content has a larger chunk of the page. I’m an absolute noob when it comes to HTML/CSS. Can someone explain how I can get this done?

    The page is thenetworkgateway.com.

    Regards

Viewing 2 replies - 1 through 2 (of 2 total)
  • Hi Ninda,
    You theme is divided by 12 columns.
    8 col goes to main content and 4 col to sidebar.
    When you count it by percentage it is about 66,6666% and 33,33333%.
    This is how most themes are build and it is good practice.
    Other way is not to have a sidebar.
    This is how the theme is build with div elements.
    If the theme is build by 9 col and 3 col wideness of the div element you will get wider content area 75% and sidebar will be 25%
    So we have to do it dirty way.
    Even it says 12/4 col we push it to be as it is 9/3
    NOT really great way to handle theme code but if you like it, then go for it.
    Otherwise,Theme would have to be rewritten in its basics.

    SO:
    put this code to your Child Theme style.css file
    OR
    Install Simple Custom CSS plugin and put the code there.
    I’m doing this on my browser to find solution.
    It can get to some different behavior on your site.
    It can happen that it is not working.
    Then we have to look further.

    @media (min-width: 768px)
    .col-lg-8 {
        width: 75.666667%;
    }
    
    @media (min-width: 992px)
    .col-lg-8 {
        width: 75.666667%;
    }
    
    @media (min-width: 1200px)
    .col-lg-8 {
        width: 75.666667%;
    }
    
    @media (min-width: 768px)
    .col-lg-4 {
        width: 25.333333%;
    }
    
    @media (min-width: 992px)
    .col-lg-4 {
        width: 25.333333%;
    }
    
    @media (min-width: 1200px)
    .col-lg-4 {
        width: 25.333333%;
    }

    or

    
    @media (min-width: 768px)
    .col-lg-8 {
        width: 75.666667%!important;
    }
    
    @media (min-width: 992px)
    .col-lg-8 {
        width: 75.666667%!important;
    }
    
    @media (min-width: 1200px)
    .col-lg-8 {
        width: 75.666667%!important;
    }
    
    @media (min-width: 768px)
    .col-lg-4 {
        width: 25.333333%!important;
    }
    
    @media (min-width: 992px)
    .col-lg-4 {
        width: 25.333333%!important;
    }
    
    @media (min-width: 1200px)
    .col-lg-4 {
        width: 25.333333%!important;
    }

    Hope this will work for you
    Cheers
    @tahoerock

    Theme Author MotoPress

    (@motopress)

    Hi,
    It is not recommended to change the width of sidebar. You can simply switch to another page template – full width for example.
    You should be good in HTML and CSS to edit it and as @tahoerock mentioned you can use Child Theme for this.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to adjust width of sidebar/widget’ is closed to new replies.