html - 将代码添加到大型商业主页未显示响应

Question

我在 Big Commerce 中自定义主题时遇到问题。我以前从未使用过这个平台，我很难找到添加代码的位置和方式。在主页上，我在产品列表之后添加了 2 个新部分。我不明白 {{partial}} 代码块。我尝试添加自己的，但没有用。起作用的只是将我的代码添加到现有的 {{partial}}。我在 partial="page"中添加了以下内容:

{{#partial "page"}}

    {{#each shipping_messages}}
        {{> components/common/alert-info message}}
    {{/each}}

<div class="main full">
    {{#if products.featured}}
        {{> components/products/featured products=products.featured columns=theme_settings.homepage_featured_products_column_count}}
    {{/if}}

    {{#if products.top_sellers}}
        {{> components/products/top products=products.top_sellers columns=theme_settings.homepage_top_products_column_count}}
    {{/if}}

    {{#if products.new}}
        {{> components/products/new products=products.new columns=theme_settings.homepage_new_products_column_count}}
    {{/if}}

</div>
<div class="message">
    <div class="recycle">
    <p class="light">Recycling takes a little effort on your part, but</p>
    <div class="recycle-image">
    <img src="https://res.cloudinary.com/adamscloud/image/upload/v1518463871/recycled-min_vwz3rb.png">
    </div>
    <p class="light">makes a Big difference to the World</p>
    </div>
    <div class="mission">
      <h2>Our Mission</h2>
      <p class="mission-text">
          We offer unique hand crafted, recycle, upcycled, repurposed, comfortable, trendy, creative, cutting edge, ironically humorous, catchy, cool, inspiring items that are unisex and are for people of all ages from all walks of life.</p>
       <p class="mission-text">Our goal is to put a smile on the Face of the World by inspiring, entertaining, bringing joy and laughter iinto peoples lives while cherishing our Mother Earth.</p>
      <h2>READ MORE</h2>


    </div>
</div>

     <div class="gallery-image">
        <div class="pic-group">
            <div class="row">
            <div class="small-12 large-3 columns pic-frame"><img class="pics" src="https://res.cloudinary.com/adamscloud/image/upload/v1518476220/gal-1_iryamj.png"></div>
            <div class="small-12 large-3 columns pic-frame"><img class="pics" src="https://res.cloudinary.com/adamscloud/image/upload/v1518476222/gal-2_xnmdtp.png"></div>
            <div class="small-12 large-3 columns pic-frame"><img class="pics" src="https://res.cloudinary.com/adamscloud/image/upload/v1518476220/gal-3_icq64o.png"></div>
            <div class="small-12 large-3 columns pic-frame"><img class="pics" src="https://res.cloudinary.com/adamscloud/image/upload/v1518476223/gal-4_ei72ob.png"></div>
            <div class="small-12 large-3 columns pic-frame"><img class="pics" src="https://res.cloudinary.com/adamscloud/image/upload/v1518476224/gal-5_yvljkk.png"></div>
            <div class="small-12 large-3 columns pic-frame"><img class="pics" src="https://res.cloudinary.com/adamscloud/image/upload/v1518476224/gal-6_lksrsb.png"></div>
            </div>

        </div>

     </div>
     <div class="events pic-group">
              <h1>You're Cool, We're Cool,</h1>
              <p>come see us at a event near you.</p>
          </div>   



{{/partial}}

我的问题是我无法让它在响应式上工作。当我在移动设备上测试时，图像被拉伸(stretch)并且 2 个并排设置。我虽然大商业使用基金会？我尝试向该部分添加列，但它仍然不起作用。有人可以告诉我如何使我添加的代码具有响应性吗？关于如何在 Big Commerce 中编码的任何来源，因为它令人沮丧。我正在使用基石主题。

Answer 1

要使您的图库网格响应并使用 Cornerstone 中的内置基础类，请在 assets/scss/settings/global/_global.scss 中将此变量设置为 true:

$include-html-classes: true !default;

这个变量公开了 Citadel 的基础类，Citadel 是一个为 Stencil 定制的模式库。此 PR 更详细一些:https://github.com/bigcommerce/cornerstone/pull/1047