Изменить ширину боковой панели и содержимого на странице продуктов Wordpress

Question

Привет, дорогие разработчики и дизайнеры,

У меня проблема с редактированием шаблона на основе WordPress Woocommerce. Я использую тему woocommerce под названием «Соседство» из ThemeForest на моем сайте.

все, что я хочу знать, как изменить ширину боковой панели & Материалы, (магазин продуктов или сообщение) тема полна ширина и полностью реагирует, поэтому процент показа было бы большим не фиксированный пиксель.

процент соотношения Thor или любой , например эта страница моего сайта http://aryagostarafzar.com/shop/digital-painting-pack2
вы видите боковую панель в левой которая составляет около 1/3of всей ширине. я мог изменить врезку процент, показывающий, поставив этот код является CSS:

.left-sidebar { 
    width:20%; 
} 

но содержание не будет автоматически соответствовать меньший боковой панели и дополнительное пространство остается свободным и не используется по содержанию, ни боковая панель.

, пожалуйста, дайте мне короткий код css, чтобы установить оба. thanks

Answer 1

Похоже, что на сайте используется старая версия сетки Bootstrap. Ширина боковой панели определяется классом «.span4» в теге. Вам нужно увеличить или уменьшить этот класс span, чтобы сделать его более крупным.

Это также увеличит или уменьшит размер ширины корпуса. Пролеты должны добавить до 12. т.е. span4 и span8

Вы можете готовы больше на этом здесь: http://getbootstrap.com/2.3.2/scaffolding.html

Answer 2

Вот мои бутстраповские коды styles.css Я не нахожу «.span4» другие .span доступны, но не определены процентом, определяется пикселем как отредактировать их мой друг

 
    * #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%; 
    }  

}