Single Column Responsive Shopping Cart Theme

Disclaimer: This can break at any given time due to Infusionsoft updates. I will keep it up-to-date as I have the time to do so. Note: This will not work on Legacy Shopping Cart Themes or 2 Column Layouts!

Please note: this CSS was built for the Graphite Single Column Layout. While its not 100% perfect its close. This CSS may need some tweaking to work on other Single Column Layout themes. There is only currently 2 sizes, desktop and mobile phone. The others will come as I have tome to work on it.

Step 1: Add this CSS to the bottom of the Layout CSS file.

/* Responsive Styling
==============================================================*/

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px) {
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

@media (min-width: 640px) { body {font-size:1rem;} } 
@media (min-width:960px) { body {font-size:1.2rem;} } 
@media (min-width:1100px) { body {font-size:1.5rem;} } 



@media only screen
and (min-device-width : 320px)
and (max-device-width : 768px) {
 #customHomeProductGridTop {
     display:none;
  }
 #nav {
   width:100%; 
  }
 #featured {
   display:inline-block;
    width:75%;
  }
 #nav ul { 
    clear:both;
    float:left;
    width:100%;
  }
 .productGridOneCol { 
    width:100%;
    margin-bottom:15em;
    text-align:center;
  }
 .productGridOneCol a p { 
    display:block;
    width:100%;
    text-align:center;
  }
 #wrapper { 
    width:20em;
    display: inline-block;
  }
 #nav ul li { 
    display:table-cell;
    display:block;
    width:100%;
  }
 #nav ul li a { 
    display:block;
    float: middle;
    width:100%;
  }
 #companyLogoTopBanner {
      width:100%;
      height:100%;
  }
 #productGrid div { 
    clear:both;
    display:block;
    float:left;
  
  }
 #topNav ul {
     float:left;

  }
  .productLarge {
      border:none;
  }
  .productDescriptionFront {
   width:100%;    
  }
  .productTable td {
   width:80%;
    display:block;
    float:left;
  }
  .cartButton, .continueButton, .formButton{
    display: block;
    width:91%;
  }
  #IMAGE {
   width:80%; 
  }
  #header {
    width:100%;
  }
  #content {
    width:80%;
  }
  #topNav {
    width:20em;
  }
  #productDetails {
    width:100%;
    float:none;
    text-align:center;
  }
  #contentProductDetail {
    width:80%;
  }
  .productTable tr {
    display:block;
    float:left;
    width:100%;
  }
  .productQty {
    display:inline;
  }
 #productDescription {
    text-align:center; 
  }
 #contentWide{
    width:100%;
  }
 #BRIEF_PRODUCT_SUMMARY{
    widht:30%;
  }
 .checkoutLinks{
    width:329px;
    padding:20px 31px 15px 0;
  }
 .shippingTable, .billingTable {
    width:100%;
    float:left;
  }
 .shippingTable tbody, .billingTable tbody {
    width:100%;
  }
 .shippingTable td input, .billingTable td input {
   width:80%; 
   float:left;
   clear:right;
  }
  .checkout {
   width:90%;
  }
  .paymentMethodTable tbody {
    display:block;
    width:100%;
    text-align:center;
  }
    .paymentMethodTable tr {
    width:100%;
    display:table;
  }
  .paymentMethodTable td {
    width:100%;
    display:table;
  }
  .paymentMethodTable {
    display:block;
  }

 #SHIPPING_ENTRY{
    width:100%;
  }
 #BILLING_ENTRY{
   width:100%; 
  }
  .td.rightAlignTop, th.rightAlignTop {
    float: left;
    position:relative;
  }
  .shippingTable td, .billingTable td {
    clear:both;
    float: left;
    position:relative;
    text-align:center;
    width:100%;
  }
  .cartDescription {
    display:none;
  }
  .viewCart tbody {
    width:100%;
    display:block;
  }
  .viewCart tr {
    width:100%;
    display:block;
  }
  .subtotal {
    width:100%;
    display:block;
  }
  .centerAlign td, .leftAlign td, .rightAlign td, td.centerAlign, th.centerAlign, td.rightAlign, th.rightAlign, td.leftAlign, th.leftAlign{
    display:block;
    text-align:center;
  }
  .checkoutLinksTop {
    padding-right:20px;
    text-align:center;
    height:clear;
    left:-13px;
    width:100%;
    position:inherit;
    margin-bottom:50px;
    
  }
  #PAYMENT_PLANS {
    display:block; 
  }
  .payPlan {
    float:left;
    margin:10px 0 20px 0;
    width:100%;
  }
  .qtyField {
    width:95%;
    text-align:center;
    height: 20px;
    margin:4px 2px 5px;
  }
  .updateCart {
    font-size:14px; 
  }
  .cartThumb {
    margin:13px 0 8px; 
  }
  .subtotal .centerAlign{
     display:none;
  }
  .promoCode {
    display:block;
    width:100%;
  }
  .codeButton {
    width:100%;
  }
  #state, #shipState {
    display:block;
    width:83%;
  }
  .addressTableInfo {
    display: inline-table;
    text-align:center;
  }
  .payPlan .rightAlign {
    display:table-cell;
  }
  .promoField {
    margin-bottom:10px;
  }
  .promoCode td {
    display:block;
    width:100%;
  }
  .promoCode tr {
    width:100%;
    display:block;
    text-align:center;
    align:center;
  }
  .checkoutShort, .search, .promoField {
    width:100%;
    display:inline-table;
  }
}

Step 2: Preview your shopping cart on a mobile device to see desired effects.