Где я могу найти отзывчивый css в Stencil на Bigcommerce?

Question

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

Я нахожусь в Bigcommerce, используя тему Cornerstone на трафарете.

Дайте мне знать, если я оставил любую информацию.

спасибо.

Answer 1

Спасибо, что помогли мне Alyss, хотя ваш ответ был довольно расплывчатым.

трафарет структура использует @include breakpoint(...)@media screen... вместо

Чтобы изменить размеры воспринимающих размеров, вам нужно будет отредактировать 2 файла. Из начальной папки stencil перейдите к /assets/js/theme/common/media-query-list.js для первого файла и /assets/scss/settings/global/screensizes/_screensizes.scss для второго файла.

Это фрагмент файла js. Просто измените значения для large, medium, and small:

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

Это фрагмент файла SCSS. Измените значения для $screen-large, $screen-medium, and $screen-small с теми же значениями, которые вы использовали для файла JS:

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

Ниже приведен фрагмент файла header.scss. «Контрольная точка @include (« medium »)» - это отзывчивый стиль для средних окон, который, как мы знаем, составляет 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; 
    } 
}