sarachisholm

$(function() {
  var client = ShopifyBuy.buildClient({
    apiKey: 'your-api-key',
    domain: 'your-shop-subdomain.myshopify.com',
    appId: '6'
  });
});

sarachisholm

Body {
	counter-reset: amount;
}
#itemA-3:checked ~
#itemE-5:not:checked {
	counter-increment: amount;
}
.price {
	content: ‘$’ + counter(amount);
}

sarachisholm

/*CSS*/
}
#itemA-3:checked ~ 
#itemB-6:checked ~ 
#itemC-2:checked ~ 
#itemD-11:checked ~ 
#itemE-5:not:checked ~ 
#itemF-2:checked ~ 
#itemG-5:checked ~ * .div1 {
display: block;

sarachisholm

<!--HTML-->
<input type="radio" id="itemA-1" />
<input type="radio" id="itemA-2" />
<input type="radio" id="itemA-3" /> 
<label for="itemA-1" />Carousel</label> 
<label for=“itemD-11" />div</label>

sarachisholm

.block {
	display: inline-block;
	min-width: 50%; /* 150px */ 
	max-width: 100%; /* 300px */ 
	width: calc((480px - 100%) * 480); /* or [calc((480px - 300px) * 480);], which equals 86,400px */
}

sarachisholm

.block {
	display: inline-block;
	min-width: 50%; /* 300px */ 
	max-width: 100%; /* 600px */ 
	width: calc((480px - 100%) * 480); /* or [calc((480px - 600px) * 480);], which equals -57,600px */
}

sarachisholm

.box {
	display: inline-block;
	min-width: 50%; 
	max-width: 100%;
	width: calc((480px - 100%) * 480);
}

sarachisholm

.box {
  width: XXpx;
  min-width: XXpx;
  max-width: XXpx;
}

sarachisholm

/*CSS*/
@media only screen and (max-width: 500px) { 
    .wrapper { display: table; } 
    .header { display: table-caption; } 
    .nav { display: block; } 
    .content { display: table-header-group; } 
    .footer { display: table-footer-group; }						
}	

sarachisholm

<!--HTML-->
<td class="wrapper"><!--Nested tables...-->
<table class="header">Header</table>
<table class="nav">Navigation</table>
<table class="content">Content</table>
<table class="footer">Footer</table> 
</table>