Added code to big commerce home page not showing up responsive - html

Question

Im customizing a theme in Big Commerce and am having issues. I've never used this platform before and I am having trouble finding where and how to add code. On the home page I've added 2 new parts following the product listings. I dont undrstand the {{partial}} blocks of code. I tried adding my own and it didnt work. What did work was just adding my code to an existing {{partial}}. I added the following to the 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}}
My problem is I cannot get it to work on responsive. When I test on mobile the images are stretched out and 2 are set side by side. I though Big commerce uses Foundation? I tried adding columns to the section but it still doesn't work. Could someone please show me how to make this code I added responsive? Any sources on how to code in Big Commerce because it is frustrating. I am using the cornerstone theme.

Answer 1

To make your gallery grid responsive and use built-in Foundation classes in Cornerstone, set this variable to true in assets/scss/settings/global/_global.scss:
$include-html-classes: true !default;
This variable exposes Foundation classes from Citadel, which is a pattern library custom to Stencil. This PR goes into a bit more detail: https://github.com/bigcommerce/cornerstone/pull/1047