Change width of sidebar and content in Wordpress products page

Question

Hi dear developers and designers,

I've got a problem in editing my wordpress woocommerce based template. I use the woocommerce theme named Neighborhood from ThemeForest in my website.

all I want to know is how to edit the width of Sidebar & Content ,( Shop Products or Post) the theme is full width and fully responsive, so the percentage of showing would be great not a fixed pixel.

percentage of thor ratio or whatever for example this page of my website http://aryagostarafzar.com/shop/digital-painting-pack2
you see the sidebar in the left which is about 1/3of whole width. i could change the sidebar percentage of showing by putting this code is css :

.left-sidebar {
    width:20%;
 }  

but the content does not automatically fit the smaller sidebar and the extra space remains free and not used by content nor sidebar.

please give me a short css code to set both. thanks

Answer 1

Looks like the site is using an old version of the Bootstrap grid. The sidebar width is being determined by the ".span4" class on the tag. You'd need to increase or decrease that span class to make it larger smaller.

That will also increase or decrease the body width size. The spans must add up to 12. i.e span4 and span8

You can ready more on it here: http://getbootstrap.com/2.3.2/scaffolding.html

Answer 2

Here is my bootstrap codes in styles.css I don't find " .span4 " other .span are available but not defined by percentage, is defined by pixel how to edit them my friend

    * #Custom Bootstrap Classes
    ==================================================         Support for columns width sidebars
==================================================
    .span-third {
    width: 193px;
    }
    .span-twothirds {
    width: 407px;
    }
    .span-bs-quarter {
    width: 100px;
    }
    .span-bs-threequarter {
    width: 340px;
    }

    @media only screen and (min-width: 1200px) {
    .span-third {
    width: 236px;
    }
    .span-twothirds {
        width: 504px;
    }
    .span-bs-quarter {
        width: 120px;
    }
    .span-bs-threequarter {
        width: 420px;
    }
}

@media only screen and (max-width: 979px) and (min-width: 768px) {

    .span-third {
        width: 145px;
    }
    .span-twothirds {
        width: 310px;
    }

    .span-bs-quarter, .span-bs-threequarter {
        width: 342px;
    }

}

@media only screen and (max-width: 979px) {

    .span-third {
        width: 100%;
    }
    .span-twothirds {
        width: 100%;
    }
    .span-bs-quarter {
        width: 100%;
    }
    .span-bs-threequarter {
    width: 100%;
    }     

}