2x2 Responsive Square Grid Showcase on Prestige Template

New Member
1 0 0

Hello! My name is Winter, I run a store called Spoiled Threads. Currently my site is hosted on Squarespace at www.spoiledthreads.com, and I am just about finished moving it over to shopify at www.spoiledthreads.myshopify.com (site code is "flengo") though the one thing I can't figure out is how to mimic the 2x2 gallery grid on desktop and a concise vertical stacked grid on mobile, on my theme template of Prestige, I had a past developer code it for me but he did it on the wrong template (Vantage) and shortly left after without telling me how to configure the code to apply to the Prestige Template. My biggest concern is time as I'm doing a popup tomorrow for my brand and would like them to be able to experience the superior feel of the new site. If anyone has any advice/tips or can code the fix please let me know. Thank you so much!

 

Current Site: https://spoiledthreads.myshopify.com

 

Vantage Snapshot with the working code: https://vbrg7a26etqorffo-11180277841.shopifypreview.com 

 

Attached is the code from the vantage template where the code was functional:

 

<div id="shopify-section-1569963408422" class="shopify-section"><section class="homepage-section-1569963408422 feat-images image-gallery section-gallery-1569963408422" data-section-id="1569963408422">
    <div class="flex-container">
        <div class="gallery-block">
            <div class="homepage-promo promo-1569963408422-0 one-half flex-item">
            	<div class="promo-inner">
            		<a href="/products/legion-of-troy-tour-shirt">
				  		<div class="box-ratio" style="padding-bottom: 100.0%;">
  							<img class="lazyload-fade lazyautosizes lazyloaded" id="" data-sizes="auto" alt="" data-srcset="//cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_1_180x.png?v=1570120534 180w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_1_360x.png?v=1570120534 360w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_1_540x.png?v=1570120534 540w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_1_720x.png?v=1570120534 720w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_1_900x.png?v=1570120534 900w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_1_1080x.png?v=1570120534 1080w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_1_1296x.png?v=1570120534 1296w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_1_1512x.png?v=1570120534 1512w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_1_1728x.png?v=1570120534 1728w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_1_1944x.png?v=1570120534 1944w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_1_2160x.png?v=1570120534 2160w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_1_2376x.png?v=1570120534 2376w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_1_2592x.png?v=1570120534 2592w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_1_2808x.png?v=1570120534 2808w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_1_3024x.png?v=1570120534 3024w" sizes="851px" srcset="//cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_1_180x.png?v=1570120534 180w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_1_360x.png?v=1570120534 360w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_1_540x.png?v=1570120534 540w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_1_720x.png?v=1570120534 720w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_1_900x.png?v=1570120534 900w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_1_1080x.png?v=1570120534 1080w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_1_1296x.png?v=1570120534 1296w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_1_1512x.png?v=1570120534 1512w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_1_1728x.png?v=1570120534 1728w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_1_1944x.png?v=1570120534 1944w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_1_2160x.png?v=1570120534 2160w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_1_2376x.png?v=1570120534 2376w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_1_2592x.png?v=1570120534 2592w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_1_2808x.png?v=1570120534 2808w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_1_3024x.png?v=1570120534 3024w">
 				  		</div>
                  		<noscript>
                    		<img src="//cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_1_800x.png?v=1570120534" alt="">
                  		</noscript>
                  		<div class="caption">
                  		</div>
                  	</a>
                </div>
                <style>
                  .homepage-promo.promo-1569963408422-0 .caption h3 {
                    color: #000;
                  }
                  .homepage-promo.promo-1569963408422-0 .caption p {
                    color: #000;
                  }
                </style>
            </div>    
        </div>
        <div class="gallery-block">
        	<div class="homepage-promo promo-1569963408422-1 one-half flex-item">
                <div class="promo-inner">
                  <a href="/products/scandal-tshirt-black">
                  	<div class="box-ratio" style="padding-bottom: 100.0%;">
                  		<img class="lazyload-fade lazyautosizes lazyloaded" id="" data-sizes="auto" alt="" data-srcset="//cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_2_180x.png?v=1570120581 180w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_2_360x.png?v=1570120581 360w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_2_540x.png?v=1570120581 540w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_2_720x.png?v=1570120581 720w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_2_900x.png?v=1570120581 900w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_2_1080x.png?v=1570120581 1080w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_2_1296x.png?v=1570120581 1296w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_2_1512x.png?v=1570120581 1512w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_2_1728x.png?v=1570120581 1728w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_2_1944x.png?v=1570120581 1944w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_2_2160x.png?v=1570120581 2160w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_2_2376x.png?v=1570120581 2376w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_2_2592x.png?v=1570120581 2592w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_2_2808x.png?v=1570120581 2808w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_2_3024x.png?v=1570120581 3024w" sizes="851px" srcset="//cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_2_180x.png?v=1570120581 180w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_2_360x.png?v=1570120581 360w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_2_540x.png?v=1570120581 540w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_2_720x.png?v=1570120581 720w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_2_900x.png?v=1570120581 900w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_2_1080x.png?v=1570120581 1080w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_2_1296x.png?v=1570120581 1296w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_2_1512x.png?v=1570120581 1512w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_2_1728x.png?v=1570120581 1728w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_2_1944x.png?v=1570120581 1944w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_2_2160x.png?v=1570120581 2160w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_2_2376x.png?v=1570120581 2376w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_2_2592x.png?v=1570120581 2592w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_2_2808x.png?v=1570120581 2808w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_2_3024x.png?v=1570120581 3024w">
                	</div>
                    <noscript>
                    	<img src="//cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_2_800x.png?v=1570120581" alt="">
                 	</noscript>
                 	<div class="caption">
                  	</div>
                  </a>
                </div>
                <style>
                  .homepage-promo.promo-1569963408422-1 .caption h3 {
                    color: #000;
                  }
                  .homepage-promo.promo-1569963408422-1 .caption p {
                    color: #000;
                  }
                </style>
        	</div>
       	 </div>  
      </div>
    <div class="clear"></div>
<style>
.flex-container {
	padding: 0;
	margin: 0;
	list-style: none;
}
      
.flex-container .flex-item {
	float: left;
    margin-bottom: 0;
    padding: 0;
}

#shopify-section-1569963408422 .homepage-promo .promo-inner h3 {
	font-size: 30px;
}

#shopify-section-1569963408422 .homepage-promo .promo-inner p {
	font-size: 14px;
}

        .section-gallery-1569963408422 .flex-container {
          margin-top: -10px;
          margin-bottom: -10px;
        }
        .section-gallery-1569963408422 .flex-container .flex-item {
          padding: 10px !important;
        }
      
        .section-gallery-1569963408422 .flex-container {
          width: 102.4%;
          margin-left: -20px;
        }
        @media only screen and (max-width: 980px) {
          .section-gallery-1569963408422 .flex-container {
            width: 105.5%;
            margin-left: -10px;
          }
        }
      
      .flex-container .one-quarter {
        width: 25%;
      }
      .flex-container .one-third {
        width: calc(100% / 3);
      }
      .flex-container .two-thirds {
        width: 66.667%;
      }
      .flex-container .one-half {
        width: 50%;
      }
      .flex-container .three-quarters {
        width: 75%;
      }
      .flex-container .one-whole {
        width: 100%;
      }
      @media only screen and (max-width: 980px) {
        .flex-container {
          width: 100%;
          margin: 0 auto;
        }
        .flex-container .one-quarter {
          width: 50%;
        }
        .flex-container .one-third {
          width: 100%;
        }
        .flex-container .two-thirds {
          width: 100%;
        }
        .flex-container .one-half {
          width: 100%;
        }
        .flex-container .three-quarters {
          width: 100%;
        }
        .flex-container .one-whole {
          width: 100%;
        }
      }
    </style>
</section>
</div>

<div id="shopify-section-1569963552356" class="shopify-section"><section class="homepage-section-1569963552356 feat-images image-gallery section-gallery-1569963552356" data-section-id="1569963552356">
    <div class="flex-container">
      
        <div class="gallery-block">
          
              

              <div class="homepage-promo promo-1569963552356-0 one-half flex-item">
                <div class="promo-inner">
                  <a href="/products/grunge-usc-cropped-hoodie-black">
                    
                      
  
<div class="box-ratio" style="padding-bottom: 100.0%;">
    <img class="lazyload-fade lazyautosizes lazyloaded" id="" data-sizes="auto" alt="" data-srcset="//cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_3_180x.png?v=1570120619 180w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_3_360x.png?v=1570120619 360w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_3_540x.png?v=1570120619 540w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_3_720x.png?v=1570120619 720w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_3_900x.png?v=1570120619 900w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_3_1080x.png?v=1570120619 1080w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_3_1296x.png?v=1570120619 1296w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_3_1512x.png?v=1570120619 1512w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_3_1728x.png?v=1570120619 1728w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_3_1944x.png?v=1570120619 1944w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_3_2160x.png?v=1570120619 2160w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_3_2376x.png?v=1570120619 2376w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_3_2592x.png?v=1570120619 2592w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_3_2808x.png?v=1570120619 2808w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_3_3024x.png?v=1570120619 3024w" sizes="851px" srcset="//cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_3_180x.png?v=1570120619 180w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_3_360x.png?v=1570120619 360w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_3_540x.png?v=1570120619 540w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_3_720x.png?v=1570120619 720w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_3_900x.png?v=1570120619 900w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_3_1080x.png?v=1570120619 1080w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_3_1296x.png?v=1570120619 1296w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_3_1512x.png?v=1570120619 1512w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_3_1728x.png?v=1570120619 1728w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_3_1944x.png?v=1570120619 1944w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_3_2160x.png?v=1570120619 2160w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_3_2376x.png?v=1570120619 2376w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_3_2592x.png?v=1570120619 2592w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_3_2808x.png?v=1570120619 2808w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_3_3024x.png?v=1570120619 3024w">
  </div>
                      <noscript>
                        <img src="//cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_3_800x.png?v=1570120619" alt="">
                      </noscript>
                    
                    <div class="caption">
                      
                      
                    </div>
                  </a>
                </div>
                <style>
                  .homepage-promo.promo-1569963552356-0 .caption h3 {
                    color: #000;
                  }
                  .homepage-promo.promo-1569963552356-0 .caption p {
                    color: #000;
                  }
                </style>
              </div>
            
        </div>
      
        <div class="gallery-block">
          
              

              <div class="homepage-promo promo-1569963552356-1 one-half flex-item">
                <div class="promo-inner">
                  <a href="/collections/all">
                    
                      
  
<div class="box-ratio" style="padding-bottom: 100.0%;">
    <img class="lazyload-fade lazyautosizes lazyloaded" id="" data-sizes="auto" alt="" data-srcset="//cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_4_180x.png?v=1570120628 180w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_4_360x.png?v=1570120628 360w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_4_540x.png?v=1570120628 540w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_4_720x.png?v=1570120628 720w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_4_900x.png?v=1570120628 900w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_4_1080x.png?v=1570120628 1080w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_4_1296x.png?v=1570120628 1296w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_4_1512x.png?v=1570120628 1512w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_4_1728x.png?v=1570120628 1728w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_4_1944x.png?v=1570120628 1944w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_4_2160x.png?v=1570120628 2160w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_4_2376x.png?v=1570120628 2376w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_4_2592x.png?v=1570120628 2592w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_4_2808x.png?v=1570120628 2808w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_4_3024x.png?v=1570120628 3024w" sizes="851px" srcset="//cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_4_180x.png?v=1570120628 180w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_4_360x.png?v=1570120628 360w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_4_540x.png?v=1570120628 540w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_4_720x.png?v=1570120628 720w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_4_900x.png?v=1570120628 900w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_4_1080x.png?v=1570120628 1080w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_4_1296x.png?v=1570120628 1296w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_4_1512x.png?v=1570120628 1512w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_4_1728x.png?v=1570120628 1728w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_4_1944x.png?v=1570120628 1944w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_4_2160x.png?v=1570120628 2160w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_4_2376x.png?v=1570120628 2376w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_4_2592x.png?v=1570120628 2592w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_4_2808x.png?v=1570120628 2808w, //cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_4_3024x.png?v=1570120628 3024w">
  </div>
                      <noscript>
                        <img src="//cdn.shopify.com/s/files/1/0111/8027/7841/files/Shopify_Show_4_800x.png?v=1570120628" alt="">
                      </noscript>
                    
                    <div class="caption">
                      
                      
                    </div>
                  </a>
                </div>
                <style>
                  .homepage-promo.promo-1569963552356-1 .caption h3 {
                    color: #000;
                  }
                  .homepage-promo.promo-1569963552356-1 .caption p {
                    color: #000;
                  }
                </style>
              </div>
            
        </div>
      

      
    </div>
    <div class="clear"></div>
    <style>
      .flex-container {
        padding: 0;
        margin: 0;
        list-style: none;
      }
      .flex-container .flex-item {
        float: left;
        margin-bottom: 0;
        padding: 0;
      }
      #shopify-section-1569963552356 .homepage-promo .promo-inner h3 {
        font-size: 12px;
      }
      #shopify-section-1569963552356 .homepage-promo .promo-inner p {
        font-size: 12px;
      }
      
        .section-gallery-1569963552356 .flex-container {
          margin-top: -10px;
          margin-bottom: -10px;
        }
        .section-gallery-1569963552356 .flex-container .flex-item {
          padding: 10px !important;
        }
      
      
        .section-gallery-1569963552356 .flex-container {
          width: 102.4%;
          margin-left: -20px;
        }
        @media only screen and (max-width: 980px) {
          .section-gallery-1569963552356 .flex-container {
            width: 105.5%;
            margin-left: -10px;
          }
        }
      
      .flex-container .one-quarter {
        width: 25%;
      }
      .flex-container .one-third {
        width: calc(100% / 3);
      }
      .flex-container .two-thirds {
        width: 66.667%;
      }
      .flex-container .one-half {
        width: 50%;
      }
      .flex-container .three-quarters {
        width: 75%;
      }
      .flex-container .one-whole {
        width: 100%;
      }
      @media only screen and (max-width: 980px) {
        .flex-container {
          width: 100%;
          margin: 0 auto;
        }
        .flex-container .one-quarter {
          width: 50%;
        }
        .flex-container .one-third {
          width: 100%;
        }
        .flex-container .two-thirds {
          width: 100%;
        }
        .flex-container .one-half {
          width: 100%;
        }
        .flex-container .three-quarters {
          width: 100%;
        }
        .flex-container .one-whole {
          width: 100%;
        }
      }
    </style>
</section>
</div>

 

 

0 Likes