Shopify Partners shopifypartners

## dirty-css-hacks-for-responsive-email-content-stacking.html
<table> <!--“Desktop” width: 600px - 300*2-->
  <tr>
    <td class=”col” width=”300”>...</td>
    <td class=”col” width=”300”>...</td>
  </tr>
</table>

## dirty-css-hacks-for-responsive-email-content-stacking-content-stacking.css
@media only screen and (max-width: 600px) {
  table, tr, td {
    display: block; /* table-cell -> block */
    width: 100%;
  }
}

## dirty-css-hacks-for-responsive-email-content-switching.html
<table> <!--“Desktop” width — 600px - 300*2-->
  <tr>
    <td class=”sub-col” width=”300”>...</td>
    <td class=”main-col” width=”300”>...</td>
  </tr>
</table>

## dirty-css-hacks-for-responsive-email-content-switching.css
@media only screen and (max-width: 500px) {
  table, tr, td {
    display: block; /* table-cell -> block */
    width: 100%;
  }

  .main-col {
    display: table-header-group;
  }


## four-advanced-shopify-theming-techniques-liquid-filters.liquid
{{ 'logo.png' | asset_url }}
{{ product.vendor | url_for_vendor }}
{{ "Shop winter boots" | link_to_tag: 'Boots' }}

//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/logo.png?34423/collections/vendors?q=Burton
<a title="Show products matching tag Boots" href="/collections/frontpage/boots">Shop winter boots</a>

## dirty-css-hacks-for-responsive-order-and-reorder-content.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>

## dirty-css-hacks-for-responsive-email-order-and-reorder-content.css
@media only screen and (max-width: 500px) {
  .wrapper {
    display: table;
  }

  .header {
    display: table-caption;
  }

  .nav {

## four-advanced-shopify-theming-techniques-liquid-output.liquid
// Liquid
<h1>{{ product.title }}</h1>
<p>{{ product.description }}</p>

// HTML returned
<h1>Snowboard Product Title</h1>
<p>The snowboard product description.</p>

## dirty-css-hacks-for-responsive-emails-the-fab-four-technique.css
.box {
  width: XXpx;
  min-width: XXpx;
  max-width: XXpx;
}

## four-advanced-shopify-theming-techniques-show-vendor.liquid
<p>Type: {{ product.type | link_to_type }}</p>
	<table> <!--“Desktop” width: 600px - 300*2-->
	<tr>
	<td class=”col” width=”300”>...</td>
	<td class=”col” width=”300”>...</td>
	</tr>
	</table>
	@media only screen and (max-width: 600px) {
	table, tr, td {
	display: block; /* table-cell -> block */
	width: 100%;
	}
	}
	<table> <!--“Desktop” width — 600px - 300*2-->
	<tr>
	<td class=”sub-col” width=”300”>...</td>
	<td class=”main-col” width=”300”>...</td>
	</tr>
	</table>
	@media only screen and (max-width: 500px) {
	table, tr, td {
	display: block; /* table-cell -> block */
	width: 100%;
	}

	.main-col {
	display: table-header-group;
	}
	{{ 'logo.png' \| asset_url }}
	{{ product.vendor \| url_for_vendor }}
	{{ "Shop winter boots" \| link_to_tag: 'Boots' }}

	//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/logo.png?34423/collections/vendors?q=Burton
	<a title="Show products matching tag Boots" href="/collections/frontpage/boots">Shop winter boots</a>
	<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>
	@media only screen and (max-width: 500px) {
	.wrapper {
	display: table;
	}

	.header {
	display: table-caption;
	}

	.nav {
	// Liquid
	<h1>{{ product.title }}</h1>
	<p>{{ product.description }}</p>

	// HTML returned
	<h1>Snowboard Product Title</h1>
	<p>The snowboard product description.</p>