Cart page appears cut off

Solved
Highlighted
Explorer
25 2 5

The cart page appears cut off (see below). My website URL is techerooco.myshopify.com.

Annotation 2020-07-14 160615.jpg

 

Here's the code on template.cart.liquid:

<div class="module-wrapper">
  <div class="module cart">
    <div class="module-header cart-header">
      <h1 class="module-title">{{ 'cart.general.header' | t }}</h1>
    </div>
    <div class="module-body">
      <div class="module-content">
        {% if cart.item_count > 0 %}
<div id="bold-cart-msg"></div>
          <form action="/cart" method="post">
            <div class="cart-items-container">
              <table class="cart-items clean">
                <thead class="cart-items-thead">
                  <tr>
                    <th class="first">{{ 'general.general.product' | t}}</th>
                    <th>{{ 'general.general.price' | t }}</th>
                    <th>{{ 'general.general.quantity' | t }}</th>
                    <th class="last">{{ 'general.general.total' | t }}</th>
                  </tr>
                </thead>
                <tbody>
                  {% for item in cart.items %}
                    <tr
                      class="cart-item variant-{{ item.variant.id }} {% include 'for-looper' %}"
                      data-variant="{{ item.variant.id }}"
                      data-title="{{ item.product.title }}"
                      data-url="{{ item.url }}">
                      <td class="cart-item-product cart-item-td">
                        <div class="cart-item-image-container">
                          <a class="cart-image" href="{{ item.url }}">
                            <img src="{{ item | img_url: 'small' }}" alt="{{ item.product.title }}">
                          </a>
                          <a class="cart-item-remove mobile-only" href="/cart/change?line={{ forloop.index }}&amp;quantity=0">
                            <span class="icon icon-cross"></span>
                          </a>
                        </div>
                        <div class="cart-item-product-wrap">
                          <span class="cart-title"><a href="{{ item.url }}">{{ item.product.title }}</a></span>
                          <span class="cart-vendor vendor">{{ item.vendor }}</span>
                          {% unless item.variant.title == 'Default Title' %}
                            <span class="cart-variant">{{ item.variant.title }}</span>
                          {% endunless %}

                        </div>
                      </td><br>                      
                      <td class="cart-item-price cart-item-td">
                        <div class="cart-item-unit-price">
                          <span class="mobile-only">{{ 'general.general.price' | t }}:</span>
                          <span class="money"><div class="un-line-item-unit-price" data-id="{{ item.key }}"><div class="qb-price-item" data-id="{{ item.key }}"><span class="Bold-theme-hook-DO-NOT-DELETE bold_cart_item_price" data-item-key="{{item.key}}" style="display:none !important;"></span>{{ item.price | money }}</div></div></span>
                        </div>
                      </td>
                      {% unless item.variant.inventory_management == blank or item.variant.inventory_policy == 'continue' %}
                        {% assign inventory = true %}
                      {% endunless %}
                      <td class="cart-item-quantity cart-item-td" {% if inventory == true %}data-max="{{ item.variant.inventory_quantity }}"{% endif %}>
                        <div class="number-input-wrapper cart-item-quantity-wrapper clearfix">
                          <div class="number-input-field">
                            <input type="number" id="cart-item-{{ item.id }}" name="updates[]" class="cart-item-quantity-display" value="{{ item.quantity }}" size="1"  aria-label="{{ "general.general.quantity" | t }}" />
                            <label class="number-input-label" for="cart-item-{{ item.id }}">{{ 'general.general.quantity' | t }}</label>
                          </div>
                          <div class="number-input-nav">
                            <div class="number-input-nav-item icon icon-plus cart-item-increase"></div>
                            <div class="number-input-nav-item icon icon-minus cart-item-decrease"></div>
                          </div>
                        </div>
                      </td>
                      <td class="cart-item-total cart-item-td">
                        <div class="cart-item-total-container">
                          <span class="mobile-only">{{ 'general.general.total' | t }}:</span>
                          <span class="money">{{ item.quantity | times: item.price | money }}</span>
                          <a class="cart-item-remove" href="/cart/change?line={{ forloop.index }}&amp;quantity=0">
                            <span class="icon icon-cross"></span>
                          </a>
                        </div>
                      </td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
            <div class="cart-tools">
              <div class="cart-totals">
                <div class="cart-price-info">
                  <p class="sub-total">{{ 'general.general.subtotal' | t}}</p>
                  <p class="cart-price"><span class="money"><span id="bk-cart-subtotal-price"><span id='revy-cart-subtotal-price'><span class="Bold-theme-hook-DO-NOT-DELETE bold_cart_total" style="display:none !important;"></span>{{ cart.total_price | money }}</span></span></span></p>
                  <p class="cart-message meta">{{ 'cart.general.tax_and_shipping' | t }}</p>
                  {% if settings.show-currency-switcher %}
                    <p class="cart-currency-note meta">{{ 'cart.general.currency_note_html' | t: currency: shop.currency }}</p>
                  {% endif %}
                </div>
                <div class="cart-cta">
                  <input type="submit" name="update" value="{{ 'cart.general.update_button' | t }}" class="button outline cart-button cart-update-button">
                  <input type="submit" name="checkout" value="{{ 'cart.general.submit' | t }}" class="button secondary inverse cart-button">
                  
                  <br><br>
<style>
  .methods-of-payment img { padding: 0.2em; }
  .lt-ie9 .methods-of-payment, .ie8 .methods-of-payment, .oldie .methods-of-payment { display: none; }
</style>
<span class="methods-of-payment">
  <img src="{{ 'visa' | payment_type_img_url }}" height="35" alt="Visa" title="Visa" />
  <img src="{{ 'master' | payment_type_img_url }}" height="35" alt="Mastercard" title="Mastercard" />
  <img src="{{ 'american_express' | payment_type_img_url }}" height="35" alt="American Express" title="American Express" />
  <img src="{{ 'discover' | payment_type_img_url }}" height="35" alt="Discover" title="Discover" />
  <img src="{{ 'jcb' | payment_type_img_url }}" height="35" alt="JCB" title="JCB" />
  <img src="{{ 'diners_club' | payment_type_img_url }}" height="35" alt="Diners Club" title="Diners Club" />
  <img src="{{ 'apple_pay' | payment_type_img_url }}" height="35" alt="Apple Pay" title="Apple Pay" />
  <img src="{{ 'google_pay' | payment_type_img_url }}" height="35" alt="Google Pay" title="Google Pay" />
  <img src="{{ 'shopify_pay' | payment_type_img_url }}" height="35" alt="Shop Pay" title="Shop Pay" />
</span>

                    </div>
              </div>
              {% if section.settings.order_notes %}
                <div class="cart-instructions">
                  <p><label for="cart-notes">{{ 'cart.general.instructions_title' | t }}</label></p>
                  <textarea rows="6" name="note" id="cart-notes" placeholder="{{ 'cart.general.instructions_placeholder' | t }}">{{ cart.note }}</textarea>
                </div>
              {% endif %}
            </div>
          </form>

          {% if section.settings.show_shipping_calculator and cart.requires_shipping %}
            {% include 'shipping-calculator' %}
          {% endif %}
        {% else %}
          <p class="empty">{{ 'cart.general.empty' | t }} <a href="{{ shop.url }}/collections/all">{{ 'cart.general.continue' | t }}</a></p>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<script type="application/json" data-cart-strings>
  {
    "notAvailableText": {{ 'cart.general.not_available'| t | json }},
    "stockLevelText": {{ 'cart.general.stock_level' | t: stock_count: '** stock_count **' | json }},
    "okayText": {{ 'cart.general.okay' | t | json }}
  }
</script>
{% schema %}
{
  "name": "Cart page",
  "settings": [
    {
      "type": "checkbox",
      "id": "order_notes",
      "label": "Enable order notes",
      "default": false
    },
    {
      "type": "header",
      "content": "Shipping calculator"
    },
    {
      "type": "checkbox",
      "id": "show_shipping_calculator",
      "label": "Enable",
      "default": false
    },
    {
      "type": "text",
      "id": "shipping_calculator_default_country",
      "label": "Default country",
      "default": "United States"
    }
  ]
}
{% endschema %}

 

0 Likes
Highlighted
Shopify Partner
994 209 404

This is an accepted solution.

@TechSolver 

 

Go to the Assets > theme.scss.liquid file and add fllowing code at the end of file:

.cart {
    padding-left: 0;
    padding-right: 0;
}

 

Thank you,

Tejas 

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
1 Like
Highlighted
Explorer
25 2 5

@Tejas_Nadpara Thanks!

1 Like