BigcommerceでStencilでレスポンシブなCSSをどこで見つけることができますか？

Question

私はヘッダのCSSを編集しようとしていますが、レスポンシブCSSがどこから来ているのかわかりません。私はscssフォルダのほとんどを見てきましたが、それを見つけることができませんでした。

私はBigcommerceでStencilのCornerstoneテーマを使用しています。

私は他の情報を残したかどうか教えてください。

ありがとうございます。

Answer 1

私の助けてくれてありがとうAlyss、あなたの応答はかなり曖昧でした。ステンシルフレームワークは応答サイズの大きさを変更するには@media screen...

の代わりに@include breakpoint(...)を使用しています

、あなたは2つのファイルを編集する必要があります。最初のstencilフォルダから、最初のファイルの場合は/assets/js/theme/common/media-query-list.jsに、2番目のファイルの場合は/assets/scss/settings/global/screensizes/_screensizes.scssに移動します。

これはjsファイルのスニペットです。単にlarge, medium, and smallの値を編集します。

const breakpointSizes = { 
    large: 1261, 
    medium: 801, 
    small: 551, 
}; 

これはSCSSファイルの抜粋です。あなたはJSファイルに使用したのと同じ値を持つ$screen-large, $screen-medium, and $screen-smallの値を編集します。

以下

$screen-large:     1261px; 
$screen-medium:     801px; 
$screen-small:     551px; 

がheader.scssファイルの抜粋です。 '@include breakpoint（ "medium"）は、中サイズのウィンドウの応答スタイルで、前の2つのファイルの801です。

.header { 
    background-color: $header-bg; 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: zIndex("low"); 

    @include breakpoint("medium") { 
     overflow: visible; 
     position: relative; 
    } 

    &.is-open { 
     height: 100%; 

     @include breakpoint("medium") { 
      height: auto; 
     } 
    } 
    &:after { 
     clear: both; 
     content: ''; 
     display: block; 
    } 
}