sarachisholm

<img src="{{ product.featured_image.src }}" alt="{{ product.featured_image.alt }}">

sarachisholm

<img src=”{{ slide_img | asset_url }}” alt=”{{ settings[slide_heading] }}”>

sarachisholm

<!--HTML-->

<table> /* “Desktop” width — 600px - 300*2 */
	<tr>
    <td class=”col” width=”300”>...</td>
    <td class=”col” width=”300”>...</td>
	</tr>
</table>	

<!--CSS-->

sarachisholm

<!--HTML-->
<table> <!--“Desktop” width: 600px - 300*2-->
  <tr>
    <td class=”col” width=”300”>...</td>
    <td class=”col” width=”300”>...</td>
	</tr>
</table>	

sarachisholm

/*CSS*/
@media only screen and (max-width: 600px) { 
	table, tr, td {
	  display: block; /* table-cell -> block */
	  width: 100%; 
  }								
}

sarachisholm

<!--HTML-->
<table> <!--“Desktop” width — 600px - 300*2-->
	<tr>
	  <td class=”sub-col” width=”300”>...</td>
	  <td class=”main-col” width=”300”>...</td>
	</tr>
</table>	

sarachisholm

/*CSS*/
@media only screen and (max-width: 500px) { 
table, tr, td {
	  display: block; /* table-cell -> block */
	  width: 100%; 
  }	
  .main-col { display: table-header-group; } 
  .sub-col { 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> 

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

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