Descriptions cut off on mobile version

New Member
2 0 0

Hey guys!,  I followed the guide on shopify to add tabs to my shop and successfully completed it BUT! on the mobile version the text is cut off by about 1 letter all the way down on every product. Stopped me dead in the water now :(. I`m using the Venture theme, if anyone can help me that would be amazing, thanks for taking the time to read this too ?

 

Tab guide i followed

https://help.shopify.com/themes/customization/products/features/add-tabs-to-product-descriptions?utm...

 

My product.template.liquid -

<div class="page-width" itemscope itemtype="http://schema.org/Product" id="ProductSection-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true" data-ajax="{{ section.settings.enable_ajax }}" data-stock="{{ section.settings.stock_enable }}">
  {% assign product_image_size = '480x480' %}

  <meta itemprop="name" content="{{ product.title }}">
  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
  <meta itemprop="image" content="{{ product.featured_image.src | img_url: '600x600' }}">
  {%- if settings.product_vendor_enable -%}
    <meta itemprop="brand" content="{{ product.vendor }}">
  {%- endif -%}

  {% comment %}
    Get first variant, or deep linked one
  {% endcomment %}
  {% assign current_variant = product.selected_or_first_available_variant %}

  <div class="grid product-single">
    <div class="grid__item {% if product.images.size > 1 %}medium-up--three-fifths{% else %}medium-up--one-half{% endif %}">
      <div class="photos">
        <div class="photos__item photos__item--main">
          <div class="product-single__photo" id="ProductPhoto">
            {% assign featured_image = product.images.first | default: product.featured_image %}
            <a href="{{ featured_image | img_url: '1024x1024' }}" class="js-modal-open-product-modal" id="ProductPhotoLink-{{ section.id }}">
              <img src="{{ featured_image | img_url: product_image_size }}" alt="{{ featured_image.alt | escape }}" id="ProductPhotoImg-{{ section.id }}">
            </a>
          </div>
        </div>
        {% if product.images.size > 1 %}
          <div class="photos__item photos__item--thumbs">
            <div class="product-single__thumbnails{% unless product.images.size > 2 %} product-single__thumbnails--static{% endunless %}" id="ProductThumbs-{{ section.id }}">
              {% for image in product.images %}
                <div class="product-single__thumbnail-item {% if image == featured_image %} is-active {% endif %}">
                  <a href="{{ image.src | img_url: product_image_size }}" data-zoom="{{ image.src | img_url: '1024x1024' }}" class="product-single__thumbnail product-single__thumbnail-{{ section.id }}">
                    <img src="{{ image.src | img_url: '160x160' }}" alt="{{ image.alt | escape }}">
                  </a>
                </div>
              {% endfor %}
            </div>
          </div>
        {% endif %}
        {% if product.images.size > 2 %}
          {% comment %}
            Add SVG icon snippets to an object for custom slider arrows
          {% endcomment %}
          <script>
            {% capture arrow_left %}{% include 'icon-arrow-left' %}{% endcapture %}
            {% capture arrow_right %}{% include 'icon-arrow-right' %}{% endcapture %}
            {% capture arrow_up %}{% include 'icon-arrow-up' %}{% endcapture %}
            {% capture arrow_down %}{% include 'icon-arrow-down' %}{% endcapture %}
            var sliderArrows = {
              left: {{ arrow_left | json }},
              right: {{ arrow_right | json }},
              up: {{ arrow_up | json }},
              down: {{ arrow_down | json }}
            }
          </script>
        {% endif %}
      </div>
    </div>

    <div class="grid__item {% if product.images.size > 1 %}medium-up--two-fifths{% else %}medium-up--one-half{% endif %}" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
      <div class="product-single__info-wrapper">
        <meta itemprop="priceCurrency" content="{{ shop.currency }}">
        <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">

        <div class="product-single__meta small--text-center">
          {% if settings.product_vendor_enable %}
            <p class="product-single__vendor">{{ product.vendor }}</p>
          {% endif %}

          <h1 itemprop="name" class="product-single__title">{{ product.title }}</h1>

          <ul class="product-single__meta-list list--no-bullets list--inline">
            <li id="ProductSaleTag-{{ section.id }}" class="{% unless product.compare_at_price > product.price %}hide{% endunless %}">
              <div class="product-tag">
                {{ 'products.product.on_sale' | t }}
              </div>
            </li>
            <li>
              {% unless product.compare_at_price_max > product.price %}
                <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
              {% endunless %}
              <span id="ProductPrice-{{ section.id }}" class="product-single__price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
                {{ current_variant.price | money }}
              </span>
            </li>
            {% if product.compare_at_price_max > product.price %}
              <li>
                <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
                <s id="ComparePrice-{{ section.id }}" class="product-single__price product-single__price--compare">
                  {{ current_variant.compare_at_price | money }}
                </s>
              </li>
            {% endif %}
            {% if section.settings.stock_enable %}
              <li>
                <span id="ProductStock-{{ section.id }}" class="product-single__stock {% unless current_variant.inventory_management and current_variant.inventory_quantity < 10 and current_variant.inventory_quantity > 0 or  current_variant.inventory_management and current_variant.inventory_quantity <= 0 and current_variant.incoming %} hide{% endunless %}">
                  {% if current_variant.inventory_management %}
                    {% if current_variant.inventory_quantity < 10 and current_variant.inventory_quantity > 0 %}
                      {% assign qty = current_variant.inventory_quantity %}
                      {{ 'products.product.stock_available' | t: count: qty }}
                    {% elsif current_variant.inventory_quantity == 0 or current_variant.inventory_quantity < 0 and current_variant.incoming %}
                      {% if current_variant.available %}
                        {% assign date = current_variant.next_incoming_date | date: "%B %-d, %Y" %}
                        {{ 'products.product.will_not_ship_until' | t: date: date  }}
                      {% else %}
                        {% assign date = current_variant.next_incoming_date | date: "%B %-d, %Y" %}
                        {{ 'products.product.will_be_in_stock_after' | t: date: date  }}
                      {% endif %}
                    {% endif %}
                  {% endif %}
                </span>
              </li>
            {% endif %}
          </ul>

        </div>

        <hr>

        <form action="/cart/add" method="post" enctype="multipart/form-data" class="product-form" id="AddToCartForm">
          

          {% unless product.options.size == 1 and product.variants[0].title == 'Default Title' %}
            {% for option in product.options_with_values %}
              <div class="selector-wrapper js product-form__item">
                <label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ section.id }}-{{ forloop.index0 }}">{{ option.name }}</label>
                <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
                  id="SingleOptionSelector-{{ forloop.index0 }}"
                  data-name="{{ option.name }}"
                  data-index="option{{ forloop.index }}">
                  {% for value in option.values %}
                    <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
                  {% endfor %}
                </select>
              </div>
            {% endfor %}
          {% endunless %}

          <select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
            {% for variant in product.variants %}
              <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
                {% if variant.available %}
                  {{ variant.title }} - {{ variant.price | money_with_currency }}
                {% else %}
                  {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                {% endif %}
              </option>
            {% endfor %}
          </select>
          <div class="product-form__item product-form__item--quantity">
            <label for="Quantity">{{ 'products.product.quantity' | t }}</label>
            <input type="number" id="Quantity" name="quantity" value="1" min="1" class="product-form__input product-form__quantity">
          </div>
          <div class="product-form__item product-form__item--submit">
            <button type="submit"
              name="add"
              id="AddToCart-{{ section.id }}"
              class="btn btn--full product-form__cart-submit{% unless current_variant.available %} btn--sold-out{% endunless %}"
              {% unless current_variant.available %}disabled="disabled"{% endunless %}>
              <span id="AddToCartText-{{ section.id }}">
                {% unless current_variant.available %}
                  {{ 'products.product.sold_out' | t }}
                {% else %}
                  {{ 'products.product.add_to_cart' | t }}
                {% endunless %}
              </span>
            </button>
          </div>
        </form>
        <img src="//cdn.shopify.com/s/files/1/2334/3341/files/cards-logo-main_large.png?v=1505126926" alt="" />
        <img src="//cdn.shopify.com/s/files/1/2334/3341/files/black_banner_large.png?v=1506060198" alt="" />
<hr>

        <div
     

        {% if section.settings.social_sharing_products %}
          <hr>
          {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
        {% endif %}
      </div>
    </div>
  </div>

        <hr>
<p style="margin-left: 2.5em;padding:
        <div class="rte product-single__description" itemprop="description">
        <div>
  <ul class="tabs">
    <li><a href="#tab-1">PRODUCT DESCRIPTION</a></li>
    <li><a href="#tab-2">SHIPPING</a></li>
    <li><a href="#tab-3">MONEYBACK GUARANTEE</a></li>
  </ul>
  <div id="tab-1">
  {{ product.description }}
  </div>
  <div id="tab-2">
  {% include 'shipping' %}
  </div>
  <div id="tab-3">
  {{ pages.returns.content }}
  </div>
</div>  
        </div>
</div>

{% unless product == empty %}
  <script type="application/json" id="ProductJson-{{ section.id }}">
    {{ product | json }}
  </script>
  {% if section.settings.stock_enable %}
    <script type="application/json" id="VariantJson-{{ section.id }}">
      [
        {% for variant in product.variants %}
          {
             "incoming": {{ variant.incoming | default: false | json }},
             "next_incoming_date": {{ variant.next_incoming_date | date: format: 'month_day_year' | json }}
          }{% unless forloop.last %},{% endunless %}
        {% endfor %}
      ]
    </script>
  {% endif %}
{% endunless %}

{% schema %}
  {
    "name": "Product pages",
    "settings": [
      {
        "type": "checkbox",
        "id": "enable_ajax",
        "label": "Stay on current page when item is added to cart",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "stock_enable",
        "label": "Show stock when less than 10 products available",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "social_sharing_products",
        "label": "Enable product sharing",
        "default": true
      }
    ]
  }
{% endschema %}


<style>
    div#product-description {
    padding-left: $gridGutter;
}             
ul.tabs {
  border-bottom: 1px solid #DDDDDD;
  display: block;
  margin: 0 0 20px;
  padding: 0;
}
ul.tabs li {
  display: block;
  float: left;
  height: 30px;
  margin-bottom: 0;
  padding: 0;
  width: auto;
}
ul.tabs li a {
  -moz-border-bottom-colors: none;
  -moz-border-image: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background: none repeat scroll 0 0 #000000;
  border-color: #DDDDDD !important;
  border-style: solid;
  border-width: 1px 1px 0 1px;
  display: block;
  font-size: 13px;
  height: 29px;
  line-height: 30px;
  margin: 0;
  padding: 0 20px;
  text-decoration: none;
  width: auto;
  color: #ffffff;
  border-bottom:none !important;
}
ul.tabs li a.active {
  background: none repeat scroll 0 0 #000000;
  border-left-width: 1px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  color: #ffffff;
  height: 30px;
  margin: 0 0 0 -1px;
  padding-top: 4px;
  position: relative;
  top: -4px;
}
ul.tabs li:first-child a.active {
  margin-left: 0;
}
ul.tabs li:first-child a {
  border-top-left-radius: 2px;
  border-width: 1px 1px 0;
}
ul.tabs li:last-child a {
  border-top-right-radius: 2px;
}
ul.tabs:before, ul.tabs:after {
  content: " ";
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  width: 0;
}
ul.tabs:after {
  clear: both;
}
</style>

0 Likes
Highlighted
Tourist
7 0 1

Did you find solution to this. I am having same issue

0 Likes