ワードプレス製品のサイドバーとコンテンツの幅を変更するページ

Question

こんにちは親愛なる開発者とデザイナー

私はワードプレスのwoocommerceベースのテンプレートの編集に問題があります。 自分のウェブサイトでThemeForestのNeighborhoodという名前のwoocommerceテーマを使用します。

私が知りたいのは、サイドバーの幅を編集する方法です。& テーマは全幅で完全に反応しますので、表示の割合は固定ピクセルではないでしょう。トール比の

割合またはウェブサイトhttp://aryagostarafzar.com/shop/digital-painting-pack2
の例えばどんな このページでは、約1/3of全幅である左にあるサイドバーを参照してください。私はこのコードを置くことによって示すのサイドバーの比率を変えることができる は、CSSです：

.left-sidebar { 
    width:20%; 
} 

が、自動的に小さく、サイドバーや余分なスペースに適合しないコンテンツは無料のままとコンテンツで使用されていないもサイドバー。

両方を設定する短いCSSコードを教えてください。 ありがとう

Answer 1

サイトが旧バージョンのブートストラップグリッドを使用しているようです。サイドバーの幅は、タグの ".span4"クラスによって決定されています。そのスパンクラスを大きくするか小さくする必要があります。

また、ボディの幅のサイズを増減します。ここでhttp://getbootstrap.com/2.3.2/scaffolding.html

Answer 2

は、私が「.span4」 を見つけることができませんStyles.cssを の私のブートストラップコードです：スパンはここにあなたがより多くのそれの準備をすることができます12.すなわち span4とspan8

にならなければなりません他の.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%; 
    }  

}